<button
x-data
x-tooltip="tooltip"
class="mx-auto block flex items-center rounded-md border-violet-700 bg-violet-500 px-4 py-2 font-medium text-gray-100 hover:bg-violet-600 focus:ring-violet-200 dark:bg-violet-500 dark:hover:bg-violet-600"
>
Hover me
</button>
<script defer src="https://cdn.jsdelivr.net/npm/litewind-alpine@0.x.x/plugins/use-floating/dist/cdn.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/litewind-alpine@0.x.x/components/tooltip/dist/cdn.min.js"></script>
The tooltip can be added to any element using the x-tooltip directive. Use the directive's value to set the tooltip text and modifiers to customize it. If the element is not part of another Alpine component, you should also add x-data directive to it.
<button x-data x-tooltip="tooltip">
Hover me
</button>
top, top-start, top-end, bottom, bottom-start, bottom-end, right, right-start, right-end, left, left-start, left-enddelay:x - delay before showing and hiding tooltip, for example, delay:300 (default 50)offset-x:x - right and left offset of the tooltip relative to the element, for example, offset-x:5 (default 0)offset-y:x - top and bottom offset of the tooltip relative to the element, for example, offset-y:5 (default 0)flip - allows flipping of the tooltip to the opposite placement if outside of current view (default false)auto-placement - automatically calculates best placement for the tooltip (default false)func - the value will be evaluated by Alpine. This can be useful for dynamic tooltips. (default false)html - allows html in the valuefade and scale-fade - animation modifiers<button
x-data
x-tooltip.right="tooltip on the right"
class="mx-auto block flex items-center rounded-md border-violet-700 bg-violet-500 px-4 py-2 font-medium text-gray-100 hover:bg-violet-600 focus:ring-violet-200 dark:bg-violet-500 dark:hover:bg-violet-600"
>
Hover me
</button>
<button
x-data
x-tooltip.delay:300="tooltip with a 300ms delay"
class="mx-auto block flex items-center rounded-md border-violet-700 bg-violet-500 px-4 py-2 font-medium text-gray-100 hover:bg-violet-600 focus:ring-violet-200 dark:bg-violet-500 dark:hover:bg-violet-600"
>
Hover me
</button>
<button
x-data
x-tooltip.offset-y:5="tooltip"
class="mx-auto block flex items-center rounded-md border-violet-700 bg-violet-500 px-4 py-2 font-medium text-gray-100 hover:bg-violet-600 focus:ring-violet-200 dark:bg-violet-500 dark:hover:bg-violet-600"
>
Hover me
</button>
<button
x-data
x-tooltip.func="() => `Function text ${(Math.random() * 100).toFixed(0)}`"
class="mx-auto block flex items-center rounded-md border-violet-700 bg-violet-500 px-4 py-2 font-medium text-gray-100 hover:bg-violet-600 focus:ring-violet-200 dark:bg-violet-500 dark:hover:bg-violet-600"
>
Hover me
</button>
<div class="flex">
<button
x-data
x-tooltip.offset-y:5.fade="tooltip"
class="mx-auto block flex items-center rounded-md border-violet-700 bg-violet-500 px-4 py-2 font-medium text-gray-100 hover:bg-violet-600 focus:ring-violet-200 dark:bg-violet-500 dark:hover:bg-violet-600"
>
Hover me (fade)
</button>
<button
x-data
x-tooltip.offset-y:5.scale-fade="tooltip"
class="mx-auto block flex items-center rounded-md border-violet-700 bg-violet-500 px-4 py-2 font-medium text-gray-100 hover:bg-violet-600 focus:ring-violet-200 dark:bg-violet-500 dark:hover:bg-violet-600"
>
Hover me (scale-fade)
</button>
</div>
<button
x-data
x-tooltip.offset-y:5.html="This tooltip allows <span class='underline'>html</span> inside"
class="mx-auto block flex items-center rounded-md border-violet-700 bg-violet-500 px-4 py-2 font-medium text-gray-100 hover:bg-violet-600 focus:ring-violet-200 dark:bg-violet-500 dark:hover:bg-violet-600"
>
Hover me
</button>