Tooltip is a user interface component containing text that appears when a user hovers/click their cursor over an element.
Tooltips are built using the
x-tooltip components.
<button x-tooltip="This top tooltip."></button>
Options can be passed as a block or individually using the
x-nui
directive.
Be sure to change the case type of the option name from "camelCase" to "kebab-case" when passing the options individually.
In block
<div x-nui="{expose:'data'}"></div>Individually
<div x-nui:expose="data"></div>| name | type | default | description |
|---|---|---|---|
container
|
string|element |
|
Appends the tooltip to a specific element. If not set, it will be added in the body of the document. |
title
|
string |
|
The tooltip title. |
trigger
|
string |
hover
|
Sets whether the menu should be displayed on
hover or
focus on the trigger element.
|
position
|
string |
bottom-start
|
Sets the placement of the dropdown menu. Possible
values: auto|
auto-start|
auto-end|
top|
top-start|
top-end|
bottom|
bottom-start|
bottom-end|
right|
right-start|
right-end|
left|
left-start|
left-end.
|
offset
|
string, array |
0,0
|
Offset of the dropdown relative to its target. You can
pass a string in attribute with comma separated values
like: x-nui:offset='10,20'.
|
expose
|
null,string |
null
|
Exposes the component api.
Receives the name of the variable where the component
api will be exposed.
|
The generated tooltip follows the following html structure.
<div class="tooltip" role="tooltip">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner"></div>
</div>