Tooltip
Add a tooltip text to any element, really useful for places where there isn't enough space to display all the information needed.
It uses
Alpinejs Anchor plugin
under the hood, therefore it is intelligent enough to display the tooltip to the best possible position.
Bruce Wayne
bruce@wayne.com - Wayne enterprises
<x-ui::tooltip>
<x-slot:trigger class="decoration-dotted underline">Bruce Wayne</x-slot:trigger>
bruce@wayne.com - Wayne enterprises
</x-ui::tooltip>
Copied!
Custom position
You can easily change the position of the tooltip by using the anchor prop. The possible values are present in the official alpinejs documentation .
Bruce Wayne
bruce@wayne.com - Wayne enterprises
<x-ui::tooltip anchor="right">
<x-slot:trigger class="decoration-dotted underline">Bruce Wayne</x-slot:trigger>
bruce@wayne.com - Wayne enterprises
</x-ui::tooltip>
Copied!
Custom offset
You can easily change the offset of the tooltip by using the offset prop. The value provided must be inputted in pixels, just like the documentation dictates.
Bruce Wayne
bruce@wayne.com - Wayne enterprises
<x-ui::tooltip offset="10">
<x-slot:trigger class="decoration-dotted underline">Bruce Wayne</x-slot:trigger>
bruce@wayne.com - Wayne enterprises
</x-ui::tooltip>
Copied!