Tooltips
Helpful little buggers that appear at the darndest times (usually when you hover an element). You might use them for showing extra context, keyboard shortcuts, or other low-priority information.
Tooltips can be used two different ways:
- As a wrapper, using the
<x-slot:trigger>slot to specify the triggering element or button - As a child — the
<ui:tooltip />element will use its parent element as a trigger if no trigger slot is defined
Using Tooltips
Wrap the triggering element with the <ui:tooltip> tag and the <x-slot:trigger> slot tag
Wrapper Tooltip with Trigger Slot
OR
Use <ui:tooltip> inside an element to trigger the tooltip by hovering its parent element.
Child Tooltip (Parent Element Trigger)
Tooltips will adjust their positioning if they overflow outside the viewport. The anchoring behavior and the overflow handling are made possible thanks to Alpine's Anchor plugin and Floating UI.
Properties
Use the following properties to customize your tooltips.
| Property | Type | Default | Description |
|---|---|---|---|
title |
string |
null |
The main title of the tooltip. |
shortcut |
string |
null |
Additional styled keyboard shortcut text. |
offset |
integer |
4 |
The offset of the tooltip from the trigger element. |
position |
string |
top |
The position relative to the trigger element. |
Title
The title prop is interchangeable with the default slot. Use whichever style you prefer.
Shortcut
Use the shortcut prop (or slot) to add styled <kbd> tags to your tooltip.
Offset
The offset defines how far (in pixels) the tooltip appears from the triggering element.
In other words, the gap between the tooltip and what it's attached to. The default is 4 -- although any integer value will work.
Position
The position prop defines where the tooltip appears relative to its triggering element.
This property defaults to top, but you can also use top-start, top-end, bottom, bottom-start, bottom-end, left, left-start, left-end, right, right-start, and right-end.
Both the offset and position props are sent to Floating UI Alpine's Anchor plugin.
Size
The size prop defines the size of the tooltip. The possible sizes are sm, md (default), lg, and xl.
Why would you want a tooltip to be extra large? I don't know, but you can if you want to.
Tooltip Sizes
Examples
Here's an example of the tooltip defaults
Default Tooltip
You can also customize the position and offset, like this.
Custom Offset and Position