---
title: Tooltip
description: Add contextual labels on hover and focus
type: reference
summary: Wrap controls with provider-backed Tooltip content outside MDX.
url: /docs/components/tooltip
source: apps/template/content/docs/components/tooltip.mdx
related:
  - /docs/components
---

# Tooltip

import { Tooltip } from "@vercel/geistdocs/components/tooltip";

<div className="not-prose my-6 flex min-h-32 items-center justify-center rounded-lg border border-gray-400 bg-background-100 p-6">
  <Tooltip position="top" text="Copy to clipboard">
    <button className="h-8 rounded-md border border-gray-400 bg-background-100 px-3" type="button">
      Hover or focus
    </button>
  </Tooltip>
</div>

```tsx
import { Tooltip } from "@vercel/geistdocs/components/tooltip";

export function Help() {
  return (
    <Tooltip position="top" text="Copy to clipboard">
      <button type="button">Copy</button>
    </Tooltip>
  );
}
```

Provide an accessible name on icon-only triggers independently of the tooltip text.