Preview

Installation

npx sigma-ui@latest add hover-card

Usage

<script setup lang="ts">
import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from '@/components/ui/hover-card';
</script>

<template>
  <HoverCard>
    <HoverCardTrigger>Hover</HoverCardTrigger>
    <HoverCardContent>
      The Vue Framework - created and maintained by @vuejs.
    </HoverCardContent>
  </HoverCard>
</template>

• Use open-delay and close-delay on <HoverCard> to tune how long the pointer has to stay on the trigger before the card opens or closes.
• Use v-model:open to control the open state.

Examples

Custom Delays

Opens immediately and stays open a little longer after the pointer leaves the trigger.

<script setup lang="ts">
import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from '@/components/ui/hover-card';
</script>

<template>
  <HoverCard
    :open-delay="0"
    :close-delay="500"
  >
    <HoverCardTrigger href="https://vuejs.org">
      @vuejs
    </HoverCardTrigger>
    <HoverCardContent side="top">
      The Progressive JavaScript Framework.
    </HoverCardContent>
  </HoverCard>
</template>

API Reference

HoverCard

Props

Prop	Type	Default
defaultOpen The open state of the hover card when it is initially rendered. Use when you do not need to control its open state.	boolean	-
open The controlled open state of the hover card. Can be binded as v-model:open.	boolean	-
openDelay The duration from when the mouse enters the trigger until the hover card opens.	number	-
closeDelay The duration from when the mouse leaves the trigger or content until the hover card closes.	number	-
enableTouch When true, tapping the trigger on touch devices toggles the hover card open/closed. By default touch interactions are ignored to match pointer hover semantics.	boolean	-

Events

Event	Payload
update:open Event handler called when the open state of the hover card changes.	[value: boolean]

Slots

Slot	Scope
default The content of the component.	-

HoverCardTrigger

Props

Prop	Type	Default
reference The reference (or anchor) element that is being referred to for positioning. If not provided will use the current component as anchor.	ReferenceElement	-
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Slots

Slot	Scope
default The content of the component.	-

HoverCardContent

Props

Prop	Type	Default
forceMount Used to force mounting when more control is needed. Useful when controlling animation with Vue animation libraries.	boolean	-
memoDependencies Reactive dependencies that should invalidate the memoized content subtree.	unknown[]	-
side The preferred side of the trigger to render against when open. Will be reversed when collisions occur and avoidCollisions is enabled.	"top" | "right" | "bottom" | "left"	"bottom"
sideOffset The distance in pixels from the trigger.	number	4
sideFlip Flip to the opposite side when colliding with boundary.	boolean	true
align The preferred alignment against the trigger. May change when collisions occur.	"center" | "start" | "end"	"center"
alignOffset An offset in pixels from the start or end alignment options.	number	0
alignFlip Flip alignment when colliding with boundary. May only occur when prioritizePosition is true.	boolean	true
avoidCollisions When true, overrides the side and align preferences to prevent collisions with boundary edges.	boolean	true
collisionBoundary The element used as the collision boundary. By default this is the viewport, though you can provide additional element(s) to be included in this check.	Element | (Element | null)[] | null	[]
collisionPadding The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { top: 20, left: 20 }.	number | Partial<Record<"top" | "right" | "bottom" | "left", number>>	0
arrowPadding The padding between the arrow and the edges of the content. If your content has border-radius, this will prevent it from overflowing the corners.	number	0
hideShiftedArrow When true, hides the arrow when it cannot be centered to the reference element.	boolean	true
sticky The sticky behavior on the align axis. partial will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst "always" will keep the content in the boundary regardless.	"partial" | "always"	"partial"
hideWhenDetached Whether to hide the content when the trigger becomes fully occluded.	boolean	false
positionStrategy The type of CSS position property to use.	"absolute" | "fixed"	-
updatePositionStrategy Strategy to update the position of the floating element on every animation frame.	"always" | "optimized"	'optimized'
disableUpdateOnLayoutShift Whether to disable the update position for the content when the layout shifted.	boolean	false
prioritizePosition Force content to be position within the viewport. Might overlap the reference element, which may not be desired.	boolean	false
reference The custom element or virtual element that will be set as the reference to position the floating element. If provided, it will replace the default anchor element.	ReferenceElement	-
dir The reading direction of the popper content when applicable. <br> If omitted, inherits globally from ConfigProvider or assumes LTR (left-to-right) reading mode.	Direction	-
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Slots

Slot	Scope
default The content of the component.	-

Accessibility

The hover card is intended for sighted pointer users and is ignored by screen readers, so don't put content in it that is only available there. Reka UI opens it on keyboard focus of the trigger as well.

Key	Description
Tab	Opens or closes the hover card when the trigger receives or loses focus.
Enter	Follows the trigger link.