# Hover Card

> Source: https://design.nanatec.co.ke/components/hover-card/
> A rich preview that opens when the pointer rests on a trigger or the trigger takes focus. Unlike a tooltip it holds real content — a profile, a link preview — and stays open while the pointer crosses from the trigger onto the card.

A rich preview that opens when the pointer rests on a trigger or the trigger
takes focus. Unlike a [tooltip](/components/tooltip/) it holds real content — a
profile, a link preview — and stays open while the pointer crosses from the
trigger onto the card.

## Preview

Rest the pointer on the name, or tab to it.

```html
<div style="padding-bottom:15rem">
  Rent for Unit 4B is overdue —
  <nana-hover-card>
    <a href="#tenant">Kamau Juma</a>
    <img slot="media" src="https://images.pexels.com/photos/6569952/pexels-photo-6569952.jpeg?auto=compress&cs=tinysrgb&w=96&h=96&fit=crop" alt="" />
    <span slot="title">Kamau Juma</span>
    <span slot="subtitle">Unit 4B · Tenant since March 2024</span>
    <div slot="content" style="display:flex;flex-direction:column;gap:.5rem">
      <nana-status set="unit" value="arrears"></nana-status>
      <span>KES 42,000 overdue · last paid 5 Aug</span>
    </div>
    <nana-button slot="actions" size="sm" variant="tertiary">Message</nana-button>
    <nana-button slot="actions" size="sm" variant="primary">Record payment</nana-button>
  </nana-hover-card>
  has not paid since August.
</div>
```

## Installation

The attribute names, events and CSS hooks below are the Web Components
reference.

## Keyboard

| Action | Does |
| --- | --- |
| Focus the trigger | Shows after `openDelay` |
| `Tab` into the card | Keeps it open (Web Components) |
| Blur | Hides after `closeDelay` |
| `Escape` | Hides at once, however the card was opened |

## Accessibility

The card is linked to the trigger through `aria-describedby` while it is open —
the title, subtitle and body on the Web Component — so a screen reader
announces it as a description of the trigger. Buttons on the card are reached
by moving focus on from the trigger; the card stays open while focus is inside
it. Keep anything essential reachable without the card:
it is a preview, and touch users never hover. The Web Component ignores touch
outright, so a tap goes straight to whatever the trigger does.

## Storybook

See every state and prop interactively in Storybook: https://storybook.nanatec.co.ke/?path=/docs/components-hover-card--docs

## Related components

<ul class="related not-content">
  <li><a href="/components/tooltip/">Tooltip</a></li>
  <li><a href="/components/popup/">Popup</a></li>
  <li><a href="/components/unit-map/">Unit Map</a></li>
  <li><a href="/components/card/">Card</a></li>
</ul>