x
1
2
3
4
5
6
<button type="button" class="btn" data-controller="interest" data-interest-for-value="tooltip"> Hover</button><div id="tooltip" popover="hint" class="popover bg-black text-reversed text-xs pb-1 pi-2" role="tooltip"> Add to library</div>1
2
3
4
5
6
7
<button type="button" class="btn" data-controller="interest" data-interest-for-value="tooltip"> Hover</button><div id="tooltip" popover="hint" class="popover bg-black text-reversed text-xs pb-1 pi-2" role="tooltip"> Add to library</div>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
.popover { background-color: var(--color-surface); border-radius: var(--rounded-lg); border-width: var(--border); box-shadow: var(--shadow-md); color: var(--color-text); inline-size: var(--popover-size, max-content); /* Anchor position */ position-area: var(--popover-position, block-end); position-try-fallbacks: var(--popover-position-try-fallbacks, flip-block); margin-block: var(--popover-margin-block, .25rem 0); /* Setup transition */ transition-behavior: allow-discrete; transition-duration: var(--time-300); transition-property: display, opacity, overlay, transform; transition-timing-function: var(--ease-spring-2); /* Exit stage to */ opacity: 0; transform: var(--scale-95); /* On stage */ &:popover-open { opacity: 1; transform: var(--scale-100); } /* Enter stage from */ @starting-style { &:popover-open { opacity: 0; transform: var(--scale-95); } } @supports (-webkit-hyphens: none) { transition-behavior: normal; }}.popover--unanchored { --popover-position: none; --popover-position-try-fallbacks: none; --popover-margin-block: 0;}.popover--block-end-center { --popover-position: block-end; --popover-margin-block: .25rem 0;}.popover--block-end-start { --popover-position: block-end span-inline-end; --popover-margin-block: .25rem 0;}.popover--block-end-end { --popover-position: block-end span-inline-start; --popover-margin-block: .25rem 0;}.popover--block-start-center { --popover-position: block-start; --popover-margin-block: 0 .25rem;}.popover--block-start-start { --popover-position: block-start span-inline-end; --popover-margin-block: 0 .25rem;}.popover--block-start-end { --popover-position: block-start span-inline-start; --popover-margin-block: 0 .25rem;}
Java Script is not required or multiple files are needed, check the notes.