Tooltip
The tooltip object displays a small text bubble for any element using the data-tooltip attribute.
Basic tooltip
A simple inline element with tooltip text revealed on hover.
Move the pointer over the label below to reveal the tooltip.
Hover meKeyboard focusable tooltip
Shows the tooltip on both hover and keyboard focus by using a focusable element.
This example uses a native button so the tooltip appears on both hover and keyboard focus.
Longer tooltip content
Demonstrates how the tooltip bubble handles a longer message within its max-width.
Longer tooltip messages wrap inside the bubble. This example also uses tabindex so plain text can receive keyboard focus.
Focusable textParameters (Blade)
| Key | Default value | Type | Available values | Description |
|---|---|---|---|---|
|
data-tooltip
|
The text content shown inside the tooltip bubble. | string | Any short plain-text tooltip message | - |
|
tabindex
|
Optional. Add `0` on non-interactive elements to allow keyboard focus and reveal the tooltip on focus. | string | - | - |
|
id
|
string | - | The DOM id of the component. | |
|
classList
|
[] | array | - | Array containing wrapping classes array |
|
attributeList
|
[] | array | - | Array containing keys and values rendered as attributes |