x
1
2
3
4
5
6
<div contents data-controller="popover" data-action="mouseenter->popover#debouncedShow mouseleave->popover#debouncedHide"> <button name="button" type="button" class="btn" data-popover-target="trigger">Save</button> <div popover="hint" class="popover bg-black text-reversed text-xs pb-1 pi-2" data-popover-target="content" role="tooltip"> Save Changes <kbd class="kbd kbd--tooltip">S</kbd> </div></div>1
2
3
4
5
6
7
<div contents data-controller="popover" data-action="mouseenter->popover#debouncedShow mouseleave->popover#debouncedHide"> <%= button_tag "Save", type: "button", class: "btn", data: { popover_target: "trigger" } %> <div popover="hint" class="popover bg-black text-reversed text-xs pb-1 pi-2" data-popover-target="content" role="tooltip"> Save Changes <kbd class="kbd kbd--tooltip">S</kbd> </div></div>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.kbd { align-items: center; background-color: var(--kbd-background, var(--color-secondary)); border-radius: var(--kbd-radius, var(--rounded-md)); color: var(--kbd-color, var(--color-text-subtle)); display: inline-flex; font-family: inherit; font-size: var(--kbd-font-size, var(--text-xs)); font-weight: var(--font-medium); column-gap: var(--size-1); justify-content: center; padding-inline: var(--kbd-padding, var(--size-1)); pointer-events: none; user-select: none;}.kbd--tooltip { --kbd-background: rgb(from var(--color-text-reversed) r g b / .2); --kbd-color: var(--color-text-reversed);}
Java Script is not required or multiple files are needed, check the notes.
No notes provided.