Tooltips

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 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mnfst@latest/lib/manifest.code.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.code.min.css" />

<!-- Manifest JS: tooltip plugin only -->
<script src="https://cdn.jsdelivr.net/npm/mnfst@latest/lib/manifest.min.js"
  data-plugin="dropdown"></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).

<!-- 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

Tooltips can display dynamic content using Alpine.js expressions.

<div x-data="{ message: 'dynamic content', count: 42 }">
    <button x-tooltip="'Current count: ' + count">Count Tooltip</button>
    <button x-tooltip="`Template: ${message}`" @click="count++">Template Literal</button>
</div>

Note that tooltips with loop variables from x-for use template literals or string concatenation to ensure the expression is recognized as dynamic.

<template x-for="item in $x.content.list">
    <h4 x-tooltip="`${item.tooltip}`" x-text="item.name"></h4>
</template>

list:
    - 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.

<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;
}