x
1
2
3
4
5
6
7
8
9
<a href="#" class="text-link" data-controller="interest" data-interest-for-value="rails_card"> @rails</a><div id="rails_card" popover="hint" class="popover" role="dialog"> <div class="flex flex-col p-3"> <h2 class="text-lg font-semibold">Ruby on Rails</h2> <p class="text-sm text-subtle">The webframework that changed the world.</p> </div></div>1
2
3
4
5
6
7
8
9
10
<a href="#" class="text-link" data-controller="interest" data-interest-for-value="rails_card"> @rails</a><div id="rails_card" popover="hint" class="popover" role="dialog"> <div class="flex flex-col p-3"> <h2 class="text-lg font-semibold">Ruby on Rails</h2> <p class="text-sm text-subtle">The webframework that changed the world.</p> </div></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-100); transition-property: display, opacity, overlay, transform; transition-timing-function: var(--ease-out-3); /* 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.