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

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"] { /* ... */ }
}