mittwald Flow Logo

Components

ContextualHelp

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

Playground

Verwende <ContextualHelp />, um ein ContextualHelp darzustellen. Das ContextualHelp kann beispielsweise aus Heading, 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.

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 Component, um das ContextualHelp z. B. neben einem Text zu platzieren.

mail.agenturserver.de
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>

Overview