Tooltip
Display contextual information when users hover or focus an element.
Overview
Tooltips provide short contextual information when users hover or focus an element.
MiniKit tooltips are implemented entirely with CSS while the JavaScript automatically adds accessibility attributes for screen readers.
Basic Usage
Add the
data-tooltip
attribute to any interactive element.
<button data-tooltip="Save changes">Save</button>The tooltip is shown when the element is hovered with a mouse or receives keyboard focus.
Placement
Tooltips are displayed above elements by default. Use
data-placement
to change the position.
<button data-tooltip="Top tooltip">Top</button>
<button data-tooltip="Bottom tooltip" data-placement="bottom">Bottom</button>
<button data-tooltip="Left tooltip" data-placement="left">Left</button>
<button data-tooltip="Right tooltip" data-placement="right">Right</button>Accessibility
MiniKit automatically applies an
aria-label
when one is not already present, ensuring tooltip text is available to assistive technologies.
- Tooltips are available on both hover and keyboard focus.
- Provide concise, descriptive tooltip text.
-
If an element already has an
aria-label, MiniKit preserves it.
API
| Attribute | Description |
|---|---|
data-tooltip | Tooltip text displayed on hover and focus. |
data-placement |
Optional placement:
top,
bottom,
left, or
right.
|
aria-label | Optional accessible label. Automatically generated when omitted. |