Tooltip

Basic usage #

Add the data-tooltip attribute to any HTML element to display a tooltip on hover. By default, the tooltip appears above the element.

<span data-tooltip="This is a tooltip">Hover me</span>

Placement #

The data-placement attribute controls the tooltip position. Four positions are available:

<span data-tooltip="Top tooltip" data-placement="top">Top</span>
<span data-tooltip="Bottom tooltip" data-placement="bottom">Bottom</span>
<span data-tooltip="Left tooltip" data-placement="left">Left</span>
<span data-tooltip="Right tooltip" data-placement="right">Right</span>

On buttons #

Tooltips work on buttons to provide additional context about the action.

<button class="btn btn-primary" data-tooltip="Save your changes">Save</button>
<button class="btn btn-outline btn-error"
        data-tooltip="This action cannot be undone"
        data-placement="bottom">Delete</button>

On links #

Add a tooltip to a link to describe the destination or action.

<p>Visit the <a href="#" data-tooltip="Go to the homepage">homepage</a>
or check the <a href="#" data-tooltip="Read the full documentation"
data-placement="bottom">documentation</a>.</p>

On form fields #

Tooltips can be placed on form elements to guide the user.

<label>Username
    <input type="text"
           data-tooltip="Must be 3-20 characters"
           placeholder="Enter username">
</label>

Long text and line breaks #

Long tooltip text wraps automatically (max-width: 20rem). You can also force explicit line breaks using 
 in the attribute:

<span data-tooltip="Line 1&#10;Line 2&#10;Line 3">Multiline tooltip</span>

Attribute summary #

Accessibility #

• Tooltips are keyboard accessible via focus (:focus in addition to :hover).
• The data-tooltip content is read by assistive technologies.
• Avoid placing essential information only in a tooltip; the content should remain understandable without hover interaction.