Hover Card @astryx-svelte/core v0.5.2 · HoverCard
Usage
HoverCard shows additional information when the user hovers or focuses a trigger element. Use it for profile cards, link summaries, or inline definitions where the user needs more context without navigating away.ts
Best practices
| Guidance | Practices |
|---|---|
| Do | Keep content supplementary; hover cards should enhance understanding without blocking the primary workflow. |
| Do | Provide a dashed underline on text triggers so users know the element is hoverable. |
| Do | Use the hook API (useHoverCard) when you need more control over timing or placement. |
| Do | Leave touchTrigger on auto so a tap opens the card on triggers that do nothing else, and stays out of the way on triggers that perform an action. |
| Don't | Place critical actions or required information inside a hover card; users may miss content that only appears on hover. |
| Don't | Use a hover card when a simple Tooltip or Popover would suffice. |
| Don't | Use a HoverCard for content the user must interact with; it disappears when the cursor leaves. |
| Do | Prefer placing HoverCard in a block context rather than directly in a <p>, heading, or link. Those placements are supported when necessary through a corrective portal, but the DOM and tab order may differ. |
Examples
Common configurations, variations, and states.HoverCard — Definition
Shows a term definition on hover within a paragraph. Use for technical terms, jargon, or concepts that some readers may not know, like a glossary built into the text.
HoverCard — Link Preview
Shows a page summary when hovering a link: title, description, and URL. Use for documentation links, article references, or any URL where a preview helps the user decide whether to click.
HoverCard — Profile Preview
Shows a user profile summary on hover with name, role, and bio. Use on usernames, avatars, or mentions to let users preview a profile without navigating away.