General

Hover Card

Copy page

View as Markdown

Open in ChatGPT

Open in Claude

For sighted users to preview content available behind a link.

Usage#

app.component.ts

import { WdsHoverCardComponent } from '@wds/angular/hover-card';

Put a link in the trigger slot and the preview in the default slot. The card only previews: everything in it must also be on the page the link opens, because touch screens have no hover. For a short label use Tooltip, for content opened by a click Popover.

Examples#

Default#

The card opens when the pointer rests on the link for open-delay (default 500 ms) or the link gets keyboard focus, and closes close-delay (default 300 ms) after the pointer leaves the link and the card.

@octocat

@octocat GitHub's mascot and the face of open source. Joined January 2011

Show code

hover-card-default.ts

import { Component } from '@angular/core';
import { WdsHoverCardComponent } from '@wds/angular/hover-card';
import { WdsAvatarComponent } from '@wds/angular/avatar';

@Component({
  selector: 'app-hover-card-default-demo',
  imports: [WdsHoverCardComponent, WdsAvatarComponent],
  template: `
    <wds-hover-card>
      <a slot="trigger" href="https://github.com/octocat" class="font-medium text-foreground underline underline-offset-4">&#64;octocat</a>
      <div class="flex gap-4">
        <wds-avatar src="https://github.com/octocat.png">OC</wds-avatar>
        <div class="flex flex-col gap-1">
          <span class="font-semibold">&#64;octocat</span>
          <span>GitHub's mascot and the face of open source.</span>
          <span class="text-xs text-muted-foreground">Joined January 2011</span>
        </div>
      </div>
    </wds-hover-card>
  `,
})
export class HoverCardDefaultDemo {}

Side#

side places the card bottom (default), top, left or right of the link, and align along it.

Left The card opens on the left.

Top The card opens on the top.

Bottom The card opens on the bottom.

Right The card opens on the right.

Show code

hover-card-side.ts

import { Component } from '@angular/core';
import { WdsHoverCardComponent } from '@wds/angular/hover-card';

@Component({
  selector: 'app-hover-card-side-demo',
  imports: [WdsHoverCardComponent],
  template: `
    <div class="flex flex-wrap items-center gap-6 text-sm">
      <wds-hover-card side="left">
        <a slot="trigger" href="#" class="text-foreground underline underline-offset-4">Left</a>
        The card opens on the left.
      </wds-hover-card>
      <wds-hover-card side="top">
        <a slot="trigger" href="#" class="text-foreground underline underline-offset-4">Top</a>
        The card opens on the top.
      </wds-hover-card>
      <wds-hover-card side="bottom">
        <a slot="trigger" href="#" class="text-foreground underline underline-offset-4">Bottom</a>
        The card opens on the bottom.
      </wds-hover-card>
      <wds-hover-card side="right">
        <a slot="trigger" href="#" class="text-foreground underline underline-offset-4">Right</a>
        The card opens on the right.
      </wds-hover-card>
    </div>
  `,
})
export class HoverCardSideDemo {}

User profile#

A person mentioned in the text. The card stays open while the pointer is over it, so its button can be clicked; with the keyboard, Tab moves from the link into the card. --wds-hover-card-width sets the width (default 16rem).

Assigned to for review.

Show code

hover-card-profile.ts

import { Component } from '@angular/core';
import { WdsHoverCardComponent } from '@wds/angular/hover-card';
import { WdsAvatarComponent } from '@wds/angular/avatar';
import { WdsButtonComponent } from '@wds/angular/button';

@Component({
  selector: 'app-hover-card-profile-demo',
  imports: [WdsHoverCardComponent, WdsAvatarComponent, WdsButtonComponent],
  template: `
    <div class="text-sm">
      Assigned to
      <wds-hover-card align="start" class="[--wds-hover-card-width:18rem]">
        <a slot="trigger" href="#" class="font-medium text-foreground underline underline-offset-4">Mira Stone</a>
        <div class="flex flex-col gap-4">
          <div class="flex items-center gap-3">
            <wds-avatar size="lg" src="https://github.com/octocat.png">MS</wds-avatar>
            <div class="flex min-w-0 flex-col">
              <span class="font-medium">Mira Stone</span>
              <span class="truncate text-muted-foreground">Product designer · Lisbon</span>
            </div>
          </div>
          <div class="grid grid-cols-3 gap-2 text-center">
            <div class="flex flex-col"><span class="font-semibold tabular-nums">24</span><span class="text-xs text-muted-foreground">Open</span></div>
            <div class="flex flex-col"><span class="font-semibold tabular-nums">118</span><span class="text-xs text-muted-foreground">Done</span></div>
            <div class="flex flex-col"><span class="font-semibold tabular-nums">3d</span><span class="text-xs text-muted-foreground">Avg. time</span></div>
          </div>
          <wds-button size="sm" variant="outline" href="#">View profile</wds-button>
        </div>
      </wds-hover-card>
      for review.
    </div>
  `,
})
export class HoverCardProfileDemo {}

Link preview#

A preview of the page behind a link in running text.

Read the before you upgrade.

Show code

hover-card-link-preview.ts

import { Component } from '@angular/core';
import { WdsHoverCardComponent } from '@wds/angular/hover-card';

@Component({
  selector: 'app-hover-card-link-preview-demo',
  imports: [WdsHoverCardComponent],
  template: `
    <div class="max-w-md text-sm">
      Read the
      <wds-hover-card class="[--wds-hover-card-width:20rem]">
        <a slot="trigger" href="#" class="font-medium text-foreground underline underline-offset-4">release notes</a>
        <div class="flex flex-col gap-2">
          <div class="aspect-video rounded-md bg-muted"></div>
          <span class="font-medium">WDS 0.2: Tooltip, Popover and more</span>
          <span class="text-muted-foreground">Four new components, a shared positioning helper and faster docs.</span>
          <span class="text-xs text-muted-foreground">wds.example.com · 3 min read</span>
        </div>
      </wds-hover-card>
      before you upgrade.
    </div>
  `,
})
export class HoverCardLinkPreviewDemo {}

Delay#

open-delay and close-delay set the delays in milliseconds.

No delay Opens and closes at once.

1 second Opens after the pointer rests for a second.

Show code

hover-card-delay.ts

import { Component } from '@angular/core';
import { WdsHoverCardComponent } from '@wds/angular/hover-card';

@Component({
  selector: 'app-hover-card-delay-demo',
  imports: [WdsHoverCardComponent],
  template: `
    <div class="flex flex-wrap items-center gap-6 text-sm">
      <wds-hover-card open-delay="0" close-delay="0">
        <a slot="trigger" href="#" class="text-foreground underline underline-offset-4">No delay</a>
        Opens and closes at once.
      </wds-hover-card>
      <wds-hover-card open-delay="1000">
        <a slot="trigger" href="#" class="text-foreground underline underline-offset-4">1 second</a>
        Opens after the pointer rests for a second.
      </wds-hover-card>
    </div>
  `,
})
export class HoverCardDelayDemo {}

API References#

A preview of content behind a link, shown when the pointer rests on the link or the link gets keyboard focus (e.g. a profile card for a

Attributes

Attribute	Type	Default	Description
open	boolean	false	Whether the card is visible. Also set by `show()` and `hide()`.
side	WdsHoverCardSide	'bottom'	Side of the trigger. Flips when there is not enough space.
align	WdsHoverCardAlign	'center'	Alignment along the trigger.
offset	number	4	Distance from the trigger in px.
open-delay.openDelay	number	500	Delay in ms before the card opens when the pointer rests on the trigger.
close-delay.closeDelay	number	300	Delay in ms before the card closes after the pointer leaves the trigger and the card.
disabled	boolean	false	Turns the card off.

Events

Event	Description
wds-open-changeCustomEvent<WdsHoverCardOpenChangeDetail>	The card opens or closes.

Methods

Method	Description
show()	Shows the card.
hide()	Hides the card.

Slots

Slot	Description
trigger	The element the card belongs to, usually a link.
(default)	Card content. It follows the trigger in the Tab order.

CSS parts (::part)

Part	Description
content	The card.

CSS custom properties

Property	Description
--wds-hover-card-width	Width of the card (default 16rem).

Accessibility#

The card is extra information for sighted users; screen readers read the link as usual. Its content follows the link in the reading and Tab order while it is open.

Do not put anything in the card that is not available after following the link: touch screens have no hover.

The card follows WCAG 1.4.13 "Content on hover or focus": the pointer can move onto it, Escape closes it, and it stays until the pointer or focus leaves.

Keyboard support#

Key	Function
Tab	Focus on the link opens the card; the next Tab moves into the card. Focus leaving the link and the card closes it.
Escape	Closes the card; focus returns to the link.

Usage#

Examples#

Default#

Side#

User profile#

Link preview#

Delay#

API References#

wds-hover-card#

Attributes

Events

Methods

Slots

CSS parts (::part)

CSS custom properties

Accessibility#

Screen reader#

Keyboard support#