Tooltips

Hover and focus hints for inline annotations.

Setup

Tooltip styles are included in Manifest CSS or a standalone stylesheet, both referencing theme variables.

Tooltip functionality is included in manifest.js with all core plugins, or it can be selectively loaded.

Manifest CSS / JSStandalone

<!-- Manifest CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mnfst@latest/lib/manifest.min.css" />

<!-- Manifest JS -->
<script src="https://cdn.jsdelivr.net/npm/mnfst@latest/lib/manifest.min.js"></script>
<!-- Tooltip styles only -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mnfst@latest/lib/manifest.tooltip.css" />

<!-- Manifest JS: tooltips plugin only -->
<script src="https://cdn.jsdelivr.net/npm/mnfst@latest/lib/manifest.min.js"
  data-plugins="tooltips"></script>

Default

Apply tooltips to any element with the x-tooltip attribute.

<button x-tooltip="Hello world">Hover me</button>

Positioning

Tooltips have utility modifiers like top and bottom to position them in relation to their trigger element. If no modifier is set, tooltips default to bottom (centered below).

Examples

<!-- Top -->
<button x-tooltip.top="Top tooltip">top</button>

<!-- Bottom with start alignment -->
<button x-tooltip.bottom.start="Bottom start tooltip">bottom-start</button>

<!-- Start with top alignment -->
<button x-tooltip.start.top="Start top tooltip">start-top</button>

<!-- Top start corner (either version works) -->
<button x-tooltip.top.start.corner="Top start corner tooltip">top-start-corner</button>
<button x-tooltip.start.top.corner="Start top corner tooltip">start-top-corner</button>

Regardless of a set modifier, tooltips overflowing the viewport will attempt to stay onscreen with default fallback positions.

Rich Content

Tooltip content supports HTML including icons for enhanced formatting.

<button x-tooltip="<span x-icon='lucide:info'></span>Hello <b>bold</b> and <em>italic</em> world">Rich Content</button>

Dynamic Content

Tooltip content can be any Alpine.js expression, re-evaluated each time the tooltip shows. Plain text that isn't an expression, like Hello world or Don't save, displays exactly as written.

<div x-data="{ count: 42, saved: false }">
    <button x-tooltip="'Current count: ' + count" @click="count++">Count</button>
    <button x-tooltip="saved ? 'All changes saved' : 'Unsaved changes'" @click="saved = !saved">Status</button>
</div>

A single word displays as text unless it names a value in scope, so x-tooltip="count" shows 42 while x-tooltip="Delete" shows Delete. An expression that resolves to an empty string, false, or null shows no tooltip. Expression results are escaped; add the .html modifier to render them as HTML.

Loop variables from x-for work the same way.

HTMLexample.yaml

<template x-for="item in $x.example.tooltipList">
    <h4 x-tooltip="item.tooltip" x-text="item.name"></h4>
</template>
tooltipList:
    - name: "Mercury"
      tooltip: "The hottest planet"
    - name: "Venus"
      tooltip: "The second hottest planet"
    - name: "Earth"
      tooltip: "The planet with the hottest parties"

Data Sources

Tooltips can retrieve content from data sources using the $x syntax.

HTMLexample.json

<button x-tooltip="$x.example.tooltip">Data Source Tooltip</button>
{
    "tooltip": "This content comes from a data source"
}

Other Popovers

Although tooltips are popovers, they can coexist in buttons that trigger other popovers—like Manifest's dropdowns and dialogs, or your custom popovers.

Styles

Theme

Default tooltips use the following theme variables:

Delay

Tooltips appear after a default 500ms hover delay, and disappear immediately when the mouse leaves the trigger element. They're automatically dismissed when the trigger is clicked or pressed. Change the duration in the theme or with custom CSS that overwrites the --tooltip-hover-delay value:

:root {
    --tooltip-hover-delay: 500ms;
}

Customization

Modify styles with custom CSS for the .tooltip classes.

.tooltip { 
    background: red;
}