x
1
2
3
4
5
6
7
8
9
10
11
<div contents data-controller="popover" data-action="mouseenter->popover#debouncedShow mouseleave->popover#debouncedHide"> <a href="" class="text-link" data-popover-target="trigger"> @rails </a> <div popover="hint" class="popover" data-popover-target="content" role="dialog"> <div class="flex flex-col p-4"> <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></div>1
2
3
4
5
6
7
8
9
10
11
12
<div contents data-controller="popover" data-action="mouseenter->popover#debouncedShow mouseleave->popover#debouncedHide"> <a href="" class="text-link" data-popover-target="trigger"> @rails </a> <div popover="hint" class="popover" data-popover-target="content" role="dialog"> <div class="flex flex-col p-4"> <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></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
.popover { background-color: var(--color-surface); border-radius: var(--rounded-md); 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-duration: var(--time-150); transition-property: display, opacity, overlay, transform; /* 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); } }}.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;}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
import { Controller } from "@hotwired/stimulus"export default class extends Controller { static targets = [ "trigger", "content" ] #showTimer #hideTimer show() { this.contentTarget.showPopover({ source: this.triggerTarget }) } hide() { this.contentTarget.hidePopover() } toggle() { this.contentTarget.togglePopover({ source: this.triggerTarget }) } debouncedShow() { clearTimeout(this.#hideTimer) this.#showTimer = setTimeout(() => this.show(), 150) } debouncedHide() { clearTimeout(this.#showTimer) this.#hideTimer = setTimeout(() => this.hide(), 150) }}No notes provided.