---
title: Tooltip
description: Definitionen und Kontext beim Überfahren anzeigen. Begriffe definieren, Akronyme erklären oder verwandte Inhalte verknüpfen, ohne die Seite zu überladen.
---

> **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version.

Fügen Sie Hover-Text hinzu, um Begriffe zu definieren, Akronyme zu erklären oder auf verwandte Seiten zu verlinken, ohne den Hauptinhalt zu überladen.

Verwenden Sie Tooltips für:
- **Inline-Definitionen von Begriffen**, ohne den Lesefluss zu unterbrechen
- **Erklärungen von Akronymen**, die einigen Lesern möglicherweise nicht bekannt sind
- **Kontextinformationen**, die hilfreich, aber nicht unbedingt erforderlich sind
- **Verknüpfungen zu verwandten Inhalten** mit einer Handlungsaufforderung

## Einfacher Tooltip

Bewegen Sie den Mauszeiger über <Tooltip tip="Eine Reihe von Protokollen, über die Softwareanwendungen miteinander kommunizieren.">API</Tooltip>, um die Definition anzuzeigen.

```jsx
<Tooltip tip="A set of protocols for software applications to communicate.">
  API
</Tooltip>
```

## Mit Überschrift

Fügen Sie über dem Hinweistext eine Überschrift hinzu:

Bewegen Sie den Mauszeiger über <Tooltip headline="API" tip="Application Programming Interface: eine Reihe von Protokollen, über die Softwareanwendungen miteinander kommunizieren.">API</Tooltip>, um die Definition mit einer Überschrift anzuzeigen.

```jsx
<Tooltip
  headline="API"
  tip="Application Programming Interface: a set of protocols for software applications to communicate."
>
  API
</Tooltip>
```

## Mit Link für eine Handlungsaufforderung

Fügen Sie einen Link hinzu, über den Nutzer mehr erfahren können:

Erfahren Sie mehr über <Tooltip headline="API" tip="Application Programming Interface: eine Reihe von Protokollen, über die Softwareanwendungen miteinander kommunizieren." cta="Mehr erfahren" href="/de/components/overview">APIs</Tooltip> in unserer Dokumentation.

```jsx
<Tooltip
  headline="API"
  tip="Application Programming Interface: a set of protocols..."
  cta="Learn more"
  href="/components/overview"
>
  API
</Tooltip>
```

## Inline-Verwendung

Tooltips funktionieren auch inline im Text. Sie können <Tooltip tip="HyperText Markup Language">HTML</Tooltip>, <Tooltip tip="Cascading Style Sheets">CSS</Tooltip> oder <Tooltip tip="JavaScript">JS</Tooltip>-Begriffe direkt im Text erklären.

```jsx
Explain <Tooltip tip="HyperText Markup Language">HTML</Tooltip>,
<Tooltip tip="Cascading Style Sheets">CSS</Tooltip>, or
<Tooltip tip="JavaScript">JS</Tooltip> terms inline.
```

## Tooltips im Vergleich zu anderen Komponenten

| Bedarf | Komponente |
|------|-----------|
| Einen Begriff inline definieren | **Tooltip** |
| Ein Konzept ausführlich erklären | Expandable oder separater Abschnitt |
| Vor etwas Wichtigem warnen | Callout (Note, Warning) |
| Kontextbezogenen Code anzeigen | CodeGroup oder Inline-Code |

**Faustregel:** Tooltips sind für kurze Definitionen (1–2 Sätze) gedacht. Längere Erklärungen gehören in den Hauptinhalt oder in einen Expandable.

## Props

<ParamField name="tip" type="string" required>
  Der beim Überfahren angezeigte Tooltip-Text.
</ParamField>

<ParamField name="headline" type="string">
  Über dem Hinweis angezeigter Text.
</ParamField>

<ParamField name="cta" type="string">
  Linktext der Handlungsaufforderung.
</ParamField>

<ParamField name="href" type="string">
  URL für die Handlungsaufforderung (erforderlich zusammen mit `cta`).
</ParamField>

<ParamField name="children" type="ReactNode">
  Der Text, der den Tooltip auslöst.
</ParamField>

## Barrierefreiheit

- Tooltips sind per Tastatur zugänglich (Tab zum Fokussieren, Anzeige bei Fokus)
- Verwenden `role="tooltip"` für Screenreader
- Der Auslösetext wird durch eine gestrichelte Unterstreichung als interaktiv gekennzeichnet

## Wie geht es weiter?

<Columns cols={2}>
  <Card title="Components Overview" icon="puzzle-piece" href="/de/components/overview">
    Browse all available components
  </Card>
  <Card title="MDX Basics" icon="file-code" href="/de/content/mdx-basics">
    Learn how to use components in MDX
  </Card>
</Columns>