Overlay
Tooltip
Small pop-up window that displays additional information or context about a particular element when a user hovers over it with their cursor.
With the support of the Floating-UI library, the popover component can utilize the flip and shift functionalities, allowing it to intelligently reposition itself on the screen based on available space and the user's interactions.
Show tooltip
Hello world
<x-tooltip x-data>
<span x-tooltip:trigger>
Show tooltip
</span>
<x-slot:content>
Hello world
</x-slot:content>
</x-tooltip>
Installation
Make sure to include the required TALL kit plugins to enable the tooltip functionality.
import {
floating,
tooltip,
} from "@tall-kit/plugins"
Alpine.plugin(floating)
Alpine.plugin(tooltip)
Usage
Trigger for certain duration
Copied!
<x-tooltip x-data placement="right" color="success" variant="soft">
<x-button variant="outline"
color="neutral"
x-floating:reference
x-on:click="$tooltip.showForDuration(2000)"
>
Copy
</x-button>
<x-slot:content>
Copied!
</x-slot:content>
</x-tooltip>
With different properties
Hover and wait
Lorem ipsum dolor sit amet
<x-tooltip x-data
placement="bottom-start"
variant="fill"
color="secondary"
:delay="1000"
:arrow="false"
:interactive="true"
:offset="2"
>
<span x-tooltip:trigger>
Hover and wait
</span>
<x-slot:content>
Lorem ipsum dolor sit amet
</x-slot:content>
</x-tooltip>