# Context Card

Tooltip

---

## Default

```tsx
import { ContextCardTrigger } from '@vercel/geistcn/components';
import type { JSX } from 'react';

export function Component(): JSX.Element {
  return (
    <div className="flex flex-row items-stretch justify-around flex-initial">
      <div className="flex flex-col items-center justify-center flex-initial">
        <ContextCardTrigger
          content="The Evil Rabbit Jumped over the Fence"
          side="top"
        >
          <span>Top</span>
        </ContextCardTrigger>
      </div>
      <div className="flex flex-col items-center justify-center flex-initial">
        <ContextCardTrigger
          content="The Evil Rabbit Jumped over the Fence"
          side="bottom"
        >
          <span>Bottom</span>
        </ContextCardTrigger>
      </div>
      <div className="flex flex-col items-center justify-center flex-initial">
        <ContextCardTrigger
          content="The Evil Rabbit Jumped over the Fence"
          side="left"
        >
          <span>Left</span>
        </ContextCardTrigger>
      </div>
      <div className="flex flex-col items-center justify-center flex-initial">
        <ContextCardTrigger
          content="The Evil Rabbit Jumped over the Fence"
          side="right"
        >
          <span>Right</span>
        </ContextCardTrigger>
      </div>
    </div>
  );
}
```

## Alignment

Use `align` to position the card at the start, center, or end of the trigger.

```tsx
import { ContextCardTrigger, Button } from '@vercel/geistcn/components';
import type { JSX } from 'react';

export function Component(): JSX.Element {
  return (
    <div className="flex gap-4 items-center justify-center">
      <ContextCardTrigger
        align="start"
        content="Start alignment positions the card at the beginning edge."
        side="bottom"
      >
        <Button>Start</Button>
      </ContextCardTrigger>
      <ContextCardTrigger
        align="center"
        content="Center alignment positions the card in the middle."
        side="bottom"
      >
        <Button>Center</Button>
      </ContextCardTrigger>
      <ContextCardTrigger
        align="end"
        content="End alignment positions the card at the ending edge."
        side="bottom"
      >
        <Button>End</Button>
      </ContextCardTrigger>
    </div>
  );
}
```

## Best Practices

### When to use

* Use Context Card to reveal entity metadata on hover or focus: a user, a deployment, a project, an API key. The trigger is usually a name link or avatar in dense data.
* For a one-line "why" without metadata rows, use `Tooltip`. For long-form content, edit forms, or persistent navigation, route to a `Drawer` or a detail page.
* Don’t use Context Card to surface destructive actions; the panel can dismiss on cursor exit before the user commits.

### Behavior

* Context Card opens on hover and keyboard focus and closes on cursor exit or blur. Preserve the ~150ms entry delay so it doesn’t flash on a fast mouse sweep.
* Cap interactive content at one primary action (`View Project`, `Open Settings`). More than one CTA reads as a menu and belongs in `Menu`.
* Don’t nest a Context Card inside a Tooltip or another Context Card; the second layer steals focus and traps keyboard users.

### Content

* Lead with the entity name as a Title Case heading and one identifying line in sentence case underneath (team slug, owner, deployment URL).
* Follow with 2–4 metadata rows of `Label: value`. Keys are Title Case noun phrases (`Last Active`, `Created`, `Plan`); values follow the same formatting rules as table cells. Use the em-dash character `—` for unknown values, never `N/A` or `null`.
* Don’t restate what the trigger already showed. If the row already renders the deployment URL, don’t repeat it as the first card line.

### Accessibility

* The trigger keeps its own accessible name; the card is supplementary and shouldn’t replace it.
* Card content is reachable by keyboard once the trigger has focus; Escape closes the card and returns focus to the trigger.