Hover Card

#Basic usage

Liked by and 3 others.

hover-card/basic.vue

<script setup lang="ts">
import { HoverCard } from "@bysages/vue";
</script>

<template>
  <HoverCard.Root>
    <p class="m-0">
      Liked by
      <HoverCard.Trigger
        class="cursor-pointer text-primary underline underline-offset-[0.2em] decoration-border-strong"
        >@sarah_chen</HoverCard.Trigger
      >
      and 3 others.
    </p>
    <HoverCard.Positioner>
      <HoverCard.Content>
        <HoverCard.Arrow>
          <HoverCard.ArrowTip />
        </HoverCard.Arrow>
        <h3 class="m-0 mb-1 font-serif">Sarah Chen</h3>
        <p class="m-0 mb-2 text-secondary">@sarah_chen</p>
        <p class="mb-3">
          Design engineer. Building quiet interfaces where the ink settles before the eye arrives.
        </p>
        <div class="flex gap-4">
          <div class="flex gap-1">
            <strong>2,456</strong>
            <span class="text-secondary">Following</span>
          </div>
          <div class="flex gap-1">
            <strong>14.5K</strong>
            <span class="text-secondary">Followers</span>
          </div>
        </div>
      </HoverCard.Content>
    </HoverCard.Positioner>
  </HoverCard.Root>
</template>

#Props

#ArrowTip

A styled part — no props of its own; it takes the anatomy's shared styling.

#Arrow

A styled part — no props of its own; it takes the anatomy's shared styling.

#Content

A styled part — no props of its own; it takes the anatomy's shared styling.

#Positioner

A styled part — no props of its own; it takes the anatomy's shared styling.

#Root

Prop	Type	Default	Description
`closeDelay`	`number`	`300`	The duration from when the mouse leaves the trigger or content until the hover card closes.
`defaultOpen`	`boolean`		The initial open state of the hover card when rendered. Use when you don't need to control the open state of the hover card.
`defaultTriggerValue`	`string \| null`		The initial trigger value when rendered. Use when you don't need to control the trigger value.
`disabled`	`boolean`		Whether the hover card is disabled
`id`	`string`		The unique identifier of the machine.
`ids`	`Partial<{ trigger: string; content: string; positioner: string; arrow: string; }>`		The ids of the elements in the popover. Useful for composition.
`open`	`boolean`		The controlled open state of the hover card
`openDelay`	`number`	`700`	The duration from when the mouse enters the trigger until the hover card opens.
`positioning`	`hoverCard.PositioningOptions`		The user provided options used to position the popover content
`triggerValue`	`string \| null`		The value of the trigger that currently open the hover card

#Trigger

Prop	Type	Default	Description
`value`	`string`		The value that identifies this specific trigger