{"name":"hover-card","title":"Hover Card","description":"For sighted users to preview content available behind a link.","installCommand":"bunx marko-ui add hover-card -y","usageTags":"","importSnippet":"import HoverCard from \"@/components/ui/hover-card/hover-card.marko\";","usageSnippet":"\n <@trigger|props|>\n @marko-ui\n \n The component registry for Marko 6.\n","tags":["HoverCard"],"parts":[{"name":"trigger","param":"Record","description":"Trigger render-prop — typically a link."}],"props":[{"name":"class","type":"string","required":false,"description":"Extra class for the content panel."},{"name":"closeDelay","type":"number | undefined","required":false,"default":"300","description":"The duration from when the mouse leaves the trigger or content until the hover card closes."},{"name":"defaultOpen","type":"boolean | undefined","required":false,"description":"The initial open state of the hover card when rendered.\nUse when you don't need to control the open state of the hover card."},{"name":"defaultTriggerValue","type":"string | null | undefined","required":false,"description":"The initial trigger value when rendered.\nUse when you don't need to control the trigger value."},{"name":"dir","type":"'ltr' | 'rtl' | undefined","required":false,"default":"ltr","description":"The document's text/writing direction."},{"name":"disabled","type":"boolean | undefined","required":false,"description":"Whether the hover card is disabled"},{"name":"getRootNode","type":"(() => ShadowRoot | Document | Node) | undefined","required":false,"description":"A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."},{"name":"ids","type":"ElementIds | undefined","required":false,"description":"The ids of the elements in the popover. Useful for composition."},{"name":"open","type":"boolean | undefined","required":false,"description":"The controlled open state of the hover card"},{"name":"openDelay","type":"number | undefined","required":false,"default":"600","description":"The duration from when the mouse enters the trigger until the hover card opens."},{"name":"positioning","type":"PositioningOptions | undefined","required":false,"description":"The user provided options used to position the popover content"},{"name":"triggerValue","type":"string | null | undefined","required":false,"description":"The controlled trigger value"}],"events":[{"name":"onFocusOutside","arg":"FocusOutsideEvent","description":"Function called when the focus is moved outside the component"},{"name":"onInteractOutside","arg":"InteractOutsideEvent","description":"Function called when an interaction happens outside the component"},{"name":"onOpenChange","arg":"OpenChangeDetails","description":"Function called when the hover card opens or closes."},{"name":"onPointerDownOutside","arg":"PointerDownOutsideEvent","description":"Function called when the pointer is pressed down outside the component"},{"name":"onTriggerValueChange","arg":"TriggerValueChangeDetails","description":"Function called when the trigger value changes."},{"name":"openChange","arg":"boolean","description":"Fires when the open state changes; receives the plain open value."}],"keyboard":[],"accessibilityNotes":["The trigger only gains hover-card behavior in addition to its native semantics — an `` trigger stays a real, focusable link with its own `href`, so keyboard users can activate it directly even though the card itself opens on hover/focus.","The card opens on trigger focus as well as hover, so keyboard-only users can reveal the preview by tabbing to the trigger — no pointer required.","Closes on `Escape` and on pointer interaction outside the card; `openDelay`/`closeDelay` (default 600ms/300ms on the underlying machine) prevent the card from flickering open during incidental mouse movement."],"examples":[{"id":"hover-card-demo","title":"Basic","source":"import HoverCard from \"@marko-ui/shadcn/ui/hover-card/hover-card.marko\";\n\n\n <@trigger|props|>\n \n @marko-ui\n \n \n
\n
\n

@marko-ui

\n

\n A shadcn-compatible component registry, ported to Marko 6.\n

\n
Joined December 2021
\n
\n
\n","description":"The `trigger` render-prop receives the trigger's props and spreads them onto the element that opens the card; `content` is shown once the pointer lingers."},{"id":"hover-card-sides","title":"Positioning","source":"import HoverCard from \"@marko-ui/shadcn/ui/hover-card/hover-card.marko\";\n\n
\n \n <@trigger|props|>\n Top\n \n

Positioned above the trigger.

\n \n\n \n <@trigger|props|>\n Right\n \n

Positioned to the right of the trigger.

\n \n\n \n <@trigger|props|>\n Bottom\n \n

Positioned below the trigger.

\n \n
","description":"Pass `positioning` with a `placement` to control which side of the trigger the card opens on."},{"id":"hover-card-custom-delays","title":"Custom delays","source":"import HoverCard from \"@marko-ui/shadcn/ui/hover-card/hover-card.marko\";\n\n\n <@trigger|props|>\n Fast hover\n \n

This card opens and closes quickly, using a 100ms delay for both.

\n","description":"Use `openDelay` and `closeDelay` (in milliseconds) to control how quickly the card opens and closes."},{"id":"hover-card-disabled","title":"Disabled","source":"import HoverCard from \"@marko-ui/shadcn/ui/hover-card/hover-card.marko\";\n\n\n <@trigger|props|>\n Disabled\n \n

This content never shows — the hover card is disabled.

\n","description":"Pass `disabled` to prevent the hover card from ever opening."},{"id":"hover-card-rtl","title":"RTL","source":"import HoverCard from \"@marko-ui/shadcn/ui/hover-card/hover-card.marko\";\nimport Button from \"@marko-ui/shadcn/ui/button/button.marko\";\n\n
\n \n <@trigger|props|>\n \n \n
\n
سماعات لاسلكية
\n
٩٩.٩٩ $
\n
\n \n \n <@trigger|props|>\n \n \n
\n
سماعات لاسلكية
\n
٩٩.٩٩ $
\n
\n \n \n <@trigger|props|>\n \n \n
\n
سماعات لاسلكية
\n
٩٩.٩٩ $
\n
\n \n \n <@trigger|props|>\n \n \n
\n
سماعات لاسلكية
\n
٩٩.٩٩ $
\n
\n \n
","description":"Set `dir=\"rtl\"` on the `HoverCard` (matching the surrounding document direction) so the positioner flips placement automatically."}],"importInstallCommand":"bun add @marko-ui/shadcn marko-zag","body":{"description":"Card content shown when open."},"nativeAttributes":"span","composition":"`HoverCard` is a single component, not three. Where upstream composes `HoverCard` / `HoverCardTrigger` / `HoverCardContent`, this port folds trigger and content into `HoverCard` itself: the `@trigger` render-prop receives the machine's trigger attributes to spread onto whatever element opens the card, and the tag's own body supplies what's shown once the pointer lingers. There is no separate `HoverCardTrigger` or `HoverCardContent` tag to import."}