Hovercard

The hovercard will appear upon the mouse entering the anchor, with a delay of 300 milliseconds. It will remain open as long as the mouse cursor is over either the open card or the anchor.

<dt-hovercard placement="bottom-start">
  <template #anchor>
    <dt-button kind="muted" importance="outlined">
      Hover over me
    </dt-button>
  </template>
  <template #content>
    <div>Content</div>
  </template>
  <template #headerContent>
    <div>Header</div>
  </template>
  <template #footerContent>
    <div>Footer</div>
  </template>
</dt-hovercard>

Usage #

• Hovercard is a progressive enhancement. It surfaces supplementary information about an entity or provides convenience shortcuts on hover, without navigating away from the current view. Its content or functionality must also be reachable by another route (a dedicated page, a menu, or an inline button).
• Keep content concise. Hovercards are transient overlays, and are not appropriate for deep interactions, multi-step flows, or extensive content.
• Use Hovercard for contextual content with structure or actions. Use Tooltip for brief, text-only descriptions of a control. Use Popover when the content is triggered by a deliberate click and should persist until dismissed.
• enterDelay is used to prevent the card from triggering on accidental cursor passes. The default delay of 300 ms is recommended for most contexts.

Accessibility #

When focus moves into an open hovercard, focus is trapped within. The user can Tab between focusable elements inside the card without accidentally leaving. Clicking outside the hovercard or keypress of esc will dismiss the card and restore focus to the element that had focus before the card opened.

Many Hovercards #

After opening one hovercard, quickly moving to another skips the entrance delay. This is a "warm-up" pattern for faster navigation between targets.

Examples #

<dt-hovercard placement="top-start">
  <template #anchor>
    <dt-button :size="200" kind="muted" importance="outlined">Profile Hovercard</dt-button>
  </template>
  <template #content>
    <ExampleProfileCard />
  </template>
</dt-hovercard>

Content Mode #

Hovercard content renders outside the DOM tree. Use the contentMode prop to apply color mode (invert, light, dark) to the positioned content. See Positioned Components for details.

<dt-hovercard content-mode="invert">...</dt-hovercard>
<dt-hovercard content-mode="dark">...</dt-hovercard>
<dt-hovercard content-mode="light">...</dt-hovercard>

Vue API #

import { DtHovercard } from '@dialpad/dialtone-vue';

Slots

Props

Events