 Search
components/badge: Badge components/button: Button components/checkbox: Checkbox components/dialog: Dialog components/input: Input components/popover: Popover components/pre: Pre components/radio: Radio components/separator: Separator components/switch: Switch components/table: Table components/textarea: Textarea components/tooltip: Tooltip components/typography: Typography plugins/plugin-nf: Nerd Font Plugin plugins/theme-catppuccin: Catppuccin Theme plugins/theme-gruvbox: Gruvbox Theme plugins/theme-nord: Nord Theme start/ascii-boxes: ASCII Boxes start/changelog: Changelog start/intro: Introduction start/intro: ## Features start/plugins: Plugins start/plugins: ## Official Plugins start/plugins: ### Themes start/plugins: ## Community Plugins contributing/style-guide: Style Guide contributing/style-guide: ## CSS Units contributing/style-guide: ## Selectors contributing/style-guide: ## Documentation plugins/plugin-dev: Developing Plugins plugins/plugin-dev: ### Style Layers contributing/contributing: Contributing contributing/contributing: ## Local Development contributing/contributing: ## Issues contributing/contributing: ## Pull Requests start/tuis-vs-guis: TUIs vs GUIs start/tuis-vs-guis: ## Monospace Fonts start/tuis-vs-guis: ## Character Cells installation/nextjs: Next.js installation/vite: Vite start/theming: Theming start/theming: ## CSS Variables start/theming: ### Font Styles start/theming: ### Colors start/theming: ### Light & Dark start/theming: ## Theme Plugins start/theming: ### Using Multiple Theme Accents start/installation: Installation start/installation: ## Installation start/installation: ## Using CSS start/installation: ## Using ESM start/installation: ## Using a CDN start/installation: ## Full Library Import start/installation: ### CSS start/installation: ### ESM start/installation: ### CDN installation/astro: Astro installation/astro: ## Scoping installation/astro: ### Frontmatter Imports installation/astro: ### <style> tag installation/astro: ### Full Library Import

Tooltip

Displays information in a popup when a specified trigger is focused or hovered over

1
2 <div is-="tooltip">
3 <span is-="tooltip-trigger badge" variant-="background2">Hover me</span>
4 <div is-="tooltip-content">
5 <p>Tooltip content</p>
6 </div>
7 </div>
8
1
2 body {
3 display: flex;
4 align-items: center;
5 justify-content: center;
6 height: 100vh;
7 }
8 [is-="tooltip-content"] {
9 background-color: var(--background1);
10 padding: 1lh 1ch;
11 width: 100%;
12 }
13

Import

@import "@webtui/css/components/tooltip.css";

Usage

<div is-="tooltip">
    <div is-="tooltip-trigger">Tooltip trigger</div>
    <div is-="tooltip-content">
        <p>Tooltip content</p>
    </div>
</div>

Examples

Positioning

1
2 <div class="row">
3 <div is-="tooltip">
4 <div is-="tooltip-trigger badge" variant-="background2">BR ↘</div>
5 <div is-="tooltip-content" position-="bottom right">
6 <p>Tooltip content</p>
7 </div>
8 </div>
9 <div is-="tooltip">
10 <div is-="tooltip-trigger badge" variant-="background2">BL ↙</div>
11 <div is-="tooltip-content" position-="bottom left">
12 <p>Tooltip content</p>
13 </div>
14 </div>
15 </div>
16 <div class="row">
17 <div is-="tooltip">
18 <span is-="tooltip-trigger badge" variant-="background2">TR ↗</span>
19 <div is-="tooltip-content" position-="top right">
20 <p>Tooltip content</p>
21 </div>
22 </div>
23 <div is-="tooltip">
24 <span is-="tooltip-trigger badge" variant-="background2">TL ↖</span>
25 <div is-="tooltip-content" position-="top left">
26 <p>Tooltip content</p>
27 </div>
28 </div>
29 </div>
30
1
2 body {
3 display: flex;
4 flex-direction: column;
5 gap: 1lh;
6 justify-content: center;
7 height: 100vh;
8 }
9 .row {
10 display: flex;
11 gap: 1ch;
12 aling-items: center;
13 justify-content: center;
14 }
15 [is-="tooltip-content"] {
16 background-color: var(--background1);
17 padding: 1lh 1ch;
18 }
19

Use baseline-* values to position the content relative to the edges of the tooltip

1
2 <div class="row">
3 <div is-="tooltip">
4 <div is-="tooltip-trigger badge" variant-="background2">Bottom Baseline-Right</div>
5 <div is-="tooltip-content" position-="bottom baseline-right">
6 <p>Tooltip content</p>
7 </div>
8 </div>
9 <div is-="tooltip">
10 <div is-="tooltip-trigger badge" variant-="background2">Bottom Baseline-Left</div>
11 <div is-="tooltip-content" position-="bottom baseline-left">
12 <p>Tooltip content</p>
13 </div>
14 </div>
15 </div>
16 <div class="row">
17 <div is-="tooltip">
18 <span is-="tooltip-trigger badge" variant-="background2">Right Baseline-Top</span>
19 <div is-="tooltip-content" position-="right baseline-top">
20 <p>Tooltip content</p>
21 </div>
22 </div>
23 <div is-="tooltip">
24 <span is-="tooltip-trigger badge" variant-="background2">Left Baseline-Top</span>
25 <div is-="tooltip-content" position-="left baseline-top">
26 <p>Tooltip content</p>
27 </div>
28 </div>
29 </div>
30
1
2 body {
3 display: flex;
4 flex-direction: column;
5 gap: 1lh;
6 justify-content: center;
7 height: 100vh;
8 }
9 .row {
10 display: flex;
11 gap: 1ch;
12 aling-items: center;
13 justify-content: center;
14 }
15 [is-="tooltip-content"] {
16 background-color: var(--background1);
17 padding: 1lh 1ch;
18 }
19

This image from the Popover page shows the values and positions that can be used in the position- property

popover-positioning.png

Reference

Properties

  • --tooltip-offset-x: The horizontal offset of the tooltip
  • --tooltip-offset-y: The vertical offset of the tooltip
  • --tooltip-delay: The delay before the tooltip appears
#my-custom-tooltip {
    --tooltip-offset-x: 1ch;
    --tooltip-offset-y: 1lh;
    --tooltip-delay: 0.5s;
}

Extending

To extend the Tooltip stylesheet, define a CSS rule on the components layer

@layer components {
    [is-~="tooltip"] {
        &[variant-="inverted"] {
            /* ... */
        }

        /* ... */
    }
}

Scope

  • All elements with the is-~="tooltip" selector
  • Children of is-="tooltip" with the is-~="tooltip-trigger" selector
  • Children of is-="tooltip" with the is-~="tooltip-content" selector
[is-~="tooltip"] { 
    [is-~="tooltip-trigger"] { /* ... */ }
    [is-~="tooltip-content"] { /* ... */ }
}