Vitral 0.2
Overlay

HoverCard

A preview of what a link points at, shown while the pointer rests on it or focus reaches it.

WAI-ARIA tested

Import

main.ts
import { HoverCard } from '@vitral/vue';

Basic

Built by @vitral and friends. 

<script setup lang="ts">import { Avatar, HoverCard } from '@vitral/vue';</script> <template>    <p style="margin: 0">        Built by        <HoverCard>            <template #trigger><a href="#">@vitral</a></template>            <div style="display: flex; gap: 0.75rem">                <Avatar label="V" shape="circle" />                <div>                    <strong>Vitral</strong>                    <p style="margin: 0.25rem 0 0; font-size: 0.8125rem">One component set for Vue, themeable from tokens to pass-through.</p>                </div>            </div>        </HoverCard>        and friends.    </p></template>

Placement and delays

Faster, to the right
<script setup lang="ts">import { HoverCard } from '@vitral/vue';</script> <template>    <HoverCard placement="right" :open-delay="200" :close-delay="100">        <template #trigger><a href="#">Faster, to the right</a></template>        <img src="https://picsum.photos/id/1025/320/180" alt="A pug wrapped in a blanket" style="display: block; width: 100%; border-radius: 6px" />    </HoverCard></template>

API

Read from packages/vue/src/components/HoverCard/types.ts, so it says what the component actually accepts.

Props

NameTypeDescription
openDelaynumberMilliseconds the pointer (or keyboard focus) rests before the card opens. Defaults to 700.
closeDelaynumberMilliseconds after the pointer leaves before it closes. Defaults to 300.
placementOverlayPlacementWhere it opens relative to the trigger. Defaults to `'bottom'`.
offsetnumberGap to the trigger, in pixels. Defaults to 8.
disabledboolean—

Plus pt, dt and unstyled from BaseProps, see pass-through and unstyled mode.

Emits

EventPayloadDescription
show——
hide——

Slots

NameSlot propsDescription
trigger—What opens the card, usually a link, which keeps working on its own.
default—The card's content: a preview of what the trigger points at.