1/* Hovercard — hover-triggered version of popover. Trigger can be any
2 element (no <button> requirement); panel is positioned `fixed` via
3 JS using `getBoundingClientRect()` so it escapes container clipping.
4
5 Markup:
6 <span class="hovercard">
7 <some-trigger />
8 <div data-hovercard aria-hidden="true">…panel content…</div>
9 </span>
10
11 Surface treatment (bg, border, shadow, radius) is shared with
12 [data-popover] in popover.css. */
13@layer components {
14 .admin-hovercard {
15 @apply relative inline-flex;
16 }
17
18 [data-hovercard] {
19 @apply fixed p-1 text-sm whitespace-nowrap z-50 transition-opacity duration-100;
20 }
21 [data-hovercard][aria-hidden='true'] {
22 @apply opacity-0 invisible pointer-events-none;
23 }
24 [data-hovercard][aria-hidden='false'] {
25 @apply opacity-100 visible pointer-events-auto;
26 }
27}