ContextualHelp

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

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

<ContextualHelpTrigger subject="Rechte & Rollen">
  <Button />

  <ContextualHelp>
    <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>

Best Practices

Ordne ein ContextualHelp immer einem spezifischen Element zu. Das kann zum Beispiel eine Heading‍, ein Text‍ oder Label‍ sein.
Nutze es für weiterführende Erklärungen oder Verweise, nicht für Unerlässliches. Zum Verständnis der Oberfläche notwendige Inhalte gehören direkt in die Oberfläche.
Halte den Inhalt kompakt. Eine Aufteilung in mehrere Absätze oder eine Überschrift ist nicht nötig.
Gib dem Trigger ein aussagekräftiges aria-label. Bevorzugt über die übersetzte subject Property, alternativ als vollständiges aria-label.

Kombiniere mit …

Combine

Benutze die Combine‍ Component, um das ContextualHelp z. B. neben einem Text‍ zu platzieren.

mail.agenturserver.de

Properties

Property	Type	Description
`UNSTABLE_portalContainer`	Elementdefault: 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.
`arrowBoundaryOffset`	numberdefault: 0	The minimum distance the arrow's edge should be from the edge of the overlay element.
`arrowRef`	RefObject<Element \| null>	A ref for the popover arrow element.
`boundaryElement`	Elementdefault: document.body	Element that that serves as the positioning boundary.
`children`	ReactNode
`className`	ClassNameOrFunction<PopoverRenderProps>default: '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.
`containerPadding`	numberdefault: 12	The placement padding that should be applied between the element and its surrounding container.
`controller`	OverlayController	An overlay controller to control the popover state.
`crossOffset`	numberdefault: 0	The additional offset applied along the cross axis between the element and its anchor element.
`defaultOpen`	boolean	Whether the overlay is open by default (uncontrolled).
`dir`	string
`getTargetRect`	((target: Element) => DOMRect \| null)default: target.getBoundingClientRect()	Overrides the target element's bounding rectangle. Useful for positioning relative to a specific point such as the mouse cursor (e.g. context menus) or text selection. @param target - The target element.
`hidden`	boolean
`inert`	boolean
`isDialogContent`	boolean	Whether the popover contains a dialog.
`isEntering`	boolean	Whether the popover is currently performing an entry animation.
`isExiting`	boolean	Whether the popover is currently performing an exit animation.
`isKeyboardDismissDisabled`	booleandefault: false	Whether pressing the escape key to close the popover should be disabled. Most popovers should not use this option. When set to true, an alternative way to close the popover with a keyboard must be provided.
`isNonModal`	boolean	Whether the popover is non-modal, i.e. elements outside the popover may be interacted with by assistive technologies. Most popovers should not use this option as it may negatively impact the screen reader experience. Only use with components such as combobox, which are designed to handle this situation carefully.
`isOpen`	boolean	Whether the overlay is open by default (controlled).
`lang`	string
`maxHeight`	number	The maxHeight specified for the overlay element. By default, it will take all space up to the current viewport height.
`offset`	numberdefault: 8	The additional offset applied along the main axis between the element and its anchor element.
`placement`	bottom (default) \| bottom left \| bottom right \| bottom start \| bottom end \| top \| top left \| top right \| top start \| top end \| left \| left top \| left bottom \| start \| start top \| start bottom \| right \| right top \| right bottom \| end \| end top \| end bottom	The placement of the element with respect to its anchor element.
`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 `<button>` is expected, you cannot render an `<a>`). - Only a single root DOM element can be rendered (no fragments). - You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
`scrollRef`	RefObject<Element \| null>default: overlayRef	A ref for the scrollable region within the overlay.
`shouldCloseOnInteractOutside`	((element: Element) => boolean)	When user interacts with the argument element outside of the popover ref, return true if onClose should be called. This gives you a chance to filter out interaction with elements that should not dismiss the popover. By default, onClose will always be called on interaction outside the popover ref.
`shouldFlip`	booleandefault: 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.
`shouldSkipAnimation`	boolean	Whether the popover should appear and disappear without an entry or exit animation. This is used by components such as PreviewTrigger to skip animations when quickly swapping between overlays.
`shouldUpdatePosition`	booleandefault: true	Whether the overlay should update its position automatically.
`slot`	string	A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent.
`style`	StyleOrFunction<TooltipRenderProps>	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.
`translate`	yes \| no
`trigger`	string	The name of the component that triggered the popover. This is reflected on the element as the `data-trigger` attribute, and can be used to provide specific styles for the popover depending on which element triggered it.
`triggerRef`	RefObject<Element \| null>	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.
`width`	string \| number	A fixed width for the popover.
`wrapWith`	ReactElement<unknown, string \| JSXElementConstructor<any>>	A React element the component is wrapped with. The element is cloned and receives the component as its only child — useful to render the component inside a link, a tooltip trigger or any other wrapper without changing the surrounding markup.

Events

Property	Type	Description
`onBlurWithin`	((e: FocusEvent<Element, Element>) => void)	Handler that is called when the target element and all descendants lose focus.
`onClick`	MouseEventHandler<HTMLDivElement>
`onFocusWithin`	((e: FocusEvent<Element, Element>) => void)	Handler that is called when the target element or a descendant receives focus.
`onFocusWithinChange`	((isFocusWithin: boolean) => void)	Handler that is called when the the focus within state changes.
`onOpenChange`	((isOpen: boolean) => void)	Handler that is called when the overlay's open state changes.

Accessibility

Property	Type	Description
`aria-describedby`	string	Identifies the element (or elements) that describes the object.
`aria-details`	string	Identifies the element (or elements) that provide a detailed, extended description for the object.
`aria-label`	string	Defines a string value that labels the current element.
`aria-labelledby`	string	Identifies the element (or elements) that labels the current element.

Components

Integrations