hover-card

1---
2import type { HTMLAttributes } from "astro/types"
3 
4import { cn } from "@/lib/utils"
5 
6type Props = HTMLAttributes<"div"> & {
7  defaultOpen?: boolean
8  open?: boolean
9  delay?: number
10  skipDelayDuration?: number
11  closeDelay?: number
12  side?: "top" | "right" | "bottom" | "left"
13  align?: "start" | "center" | "end"
14  sideOffset?: number
15  alignOffset?: number
16  avoidCollisions?: boolean
17  collisionPadding?: number
18  portal?: boolean
19  closeOnClickOutside?: boolean
20  closeOnEscape?: boolean
21}
22 
23const {
24  class: className,
25  defaultOpen,
26  open,
27  delay = 300,
28  skipDelayDuration = 300,
29  closeDelay = 300,
30  side = "bottom",
31  align = "center",
32  sideOffset = 4,
33  alignOffset = 4,
34  avoidCollisions = true,
35  collisionPadding = 8,
36  portal = true,
37  closeOnClickOutside = true,
38  closeOnEscape = true,
39  ...props
40} = Astro.props
41---
42 
43<div
44  data-slot="hover-card"
45  data-default-open={defaultOpen}
46  data-open={open}
47  data-delay={delay}
48  data-skip-delay-duration={skipDelayDuration}
49  data-close-delay={closeDelay}
50  data-side={side}
51  data-align={align}
52  data-side-offset={sideOffset}
53  data-align-offset={alignOffset}
54  data-avoid-collisions={avoidCollisions}
55  data-collision-padding={collisionPadding}
56  data-portal={portal}
57  data-close-on-click-outside={closeOnClickOutside}
58  data-close-on-escape={closeOnEscape}
59  class={cn(className)}
60  {...props}
61>
62  <slot />
63</div>
64 
65<script>
66  import { create } from "@data-slot/hover-card"
67 
68  create()
69</script>