ContextualHelp

Playground

Verwende <ContextualHelp />, um ein ContextualHelp darzustellen. Das ContextualHelp kann beispielsweise aus Text und Link bestehen.

Da das ContextualHelp sich nur durch eine Aktion des Users anzeigen lässt, wird ein <ContextualHelpTrigger /> in Kombination mit einem <Button /> benötigt. Über die subject Property des Triggers wird der Betreff angegeben, auf den sich das ContextualHelp bezieht. Er wird in die übersetzte Vorlage Weitere Informationen zu {subject} eingesetzt und ergibt so das Accessibility-Label des Buttons, etwa „Weitere Informationen zu Rechte & Rollen“.

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>

Kombiniere mit ...

Align

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