# ContextualHelp

Ein ContextualHelp bietet dem User weiterführende, hilfreiche Informationen in einem Popover an.

## Overview

# Playground

Verwende `<ContextualHelp />`, um ein ContextualHelp darzustellen. Das
ContextualHelp kann beispielsweise aus
[Heading](/04-components/content/heading/overview),
[Text](/04-components/content/text/overview) und
[Link](/04-components/navigation/link/overview) bestehen.

Da das ContextualHelp sich nur durch eine Aktion des Users anzeigen lässt, wird
ein `<ContextualHelpTrigger />` in Kombination mit einem `<Button />` benötigt.

```tsx
import {
  Button,
  ContextualHelp,
  ContextualHelpTrigger,
  Heading,
  Link,
  Text,
} from "@mittwald/flow-react-components";

<ContextualHelpTrigger>
  <Button />

  <ContextualHelp>
    <Heading>Rechte & Rollen</Heading>
    <Text>
      Jedem Benutzer-Profil wird im mStudio je Projekt
      und/oder Organisation eine Rolle zugewiesen. Das
      ermöglicht dir ein ganz neues und modernes Arbeiten.
    </Text>
    <Link>Mehr erfahren</Link>
  </ContextualHelp>
</ContextualHelpTrigger>
```

---

# Kombiniere mit ...

## Align

Benutze die [Align](/04-components/structure/align/overview) Component, um das
ContextualHelp z. B. neben einem [Text](/04-components/content/text/overview) zu
platzieren.

```tsx
import {
  Align,
  Button,
  ContextualHelp,
  ContextualHelpTrigger,
  Text,
} from "@mittwald/flow-react-components";

<Align>
  <Text>mail.agenturserver.de</Text>

  <ContextualHelpTrigger>
    <Button />

    <ContextualHelp>
      <Text>
        Hier wird die URL des Servers angezeigt, der für den
        E-Mail-Versand genutzt wird.
      </Text>
    </ContextualHelp>
  </ContextualHelpTrigger>
</Align>
```