# ContextualHelp
Ein ContextualHelp bietet dem User weiterführende, hilfreiche Informationen in einem Popover an.
## Overview
# Playground
Verwende ``, 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 `` in Kombination mit einem `` benötigt.
```tsx
import {
Button,
ContextualHelp,
ContextualHelpTrigger,
Heading,
Link,
Text,
} from "@mittwald/flow-react-components";
Rechte & Rollen
Jedem Benutzer-Profil wird im mStudio je Projekt
und/oder Organisation eine Rolle zugewiesen. Das
ermöglicht dir ein ganz neues und modernes Arbeiten.
Mehr erfahren
```
---
# 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";
mail.agenturserver.de
Hier wird die URL des Servers angezeigt, der für den
E-Mail-Versand genutzt wird.
```
## Develop
# Properties
| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | `ReactNode` | - | - |
| `width` | `string \| number` | - | A fixed width for the popover. |
| `offset` | `number` | `8` | The additional offset applied along the main axis between the element and its anchor element. |
| `translate` | `"yes" \| "no"` | - | - |
| `arrowBoundaryOffset` | `number` | `0` | The minimum distance the arrow's edge should be from the edge of the overlay element. |
| `className` | `ClassNameOrFunction` | `'react-aria-Popover'` | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. |
| `triggerRef` | `RefObject` | - | The ref for the element which the popover positions itself with respect to. When used within a trigger component such as DialogTrigger, MenuTrigger, Select, etc., this is set automatically. It is only required when used standalone. |
| `isEntering` | `boolean` | - | Whether the popover is currently performing an entry animation. |
| `isExiting` | `boolean` | - | Whether the popover is currently performing an exit animation. |
| `UNSTABLE_portalContainer` _(deprecated)_ | `Element` | `document.body` | The container element in which the overlay portal will be placed. This may have unknown behavior depending on where it is portalled to. @deprecated - Use a parent UNSAFE_PortalProvider to set your portal container instead. |
| `placement` | `Placement` | `'bottom'` | The placement of the element with respect to its anchor element. |
| `containerPadding` | `number` | `12` | The placement padding that should be applied between the element and its surrounding container. |
| `crossOffset` | `number` | `0` | The additional offset applied along the cross axis between the element and its anchor element. |
| `shouldFlip` | `boolean` | `true` | Whether the element should flip its orientation (e.g. top to bottom or left to right) when there is insufficient room for it to render completely. |
| `isOpen` | `boolean` | - | Whether the overlay is open by default (controlled). |
| `defaultOpen` | `boolean` | - | Whether the overlay is open by default (uncontrolled). |
| `style` | `StyleOrFunction` | - | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state. |
| `render` | `DOMRenderFunction<"div", TooltipRenderProps>` | - | Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components. Requirements: - You must render the expected element type (e.g. if `