Zum Hauptinhalt springen

QuickInfo

QuickInfo in Storybook

Beispiele​

Im Abschnitt Verwendung finden Sie Informationen darüber, wie und wann Sie die Komponenten Tooltip und TooltipIcon verwenden können.

Einfache QuickInfo​

Eine einfache QuickInfo, die zu einer Button-Komponente hinzugefügt wurde. Die QuickInfo wird angezeigt, wenn der Mauszeiger über die Schaltfläche bewegt wird.

import React from 'react';
import { Tooltip, Button } from '@jutro/components';

export const BasicTooltip = () => {
  return (
    <Tooltip content="This is a tooltip">
      <Button label="Move the cursor here" />
    </Tooltip>
  );
};

Unterschiedliche Auslöser und Positionen verwenden​

Sie können die QuickInfo durch Klicken, Fokussieren oder Mauseingabe auslösen. Die QuickInfo wird je nach placement-Eigenschaft an einer anderen Stelle angezeigt.

import { Button, Tooltip } from '@jutro/components';
import React from 'react';

export const TooltipPlacementAndTriggers = () => {
  return (
    <>
      <Tooltip
        content="Tooltip displayed on the left"
        placement="left"
        trigger="click"
      >
        <Button
          label="Click trigger"
          style={{ margin: '0 1rem 0 0' }}
        />
      </Tooltip>
      <Tooltip
        content="Tooltip displayed on the top"
        placement="top"
        trigger="click focus"
      >
        <Button
          label="Focus trigger"
          style={{ margin: '0 1rem 0 0' }}
        />
      </Tooltip>
      <Tooltip
        content="Tooltip displayed on the right"
        placement="right"
        trigger="mouseenter"
      >
        <Button label="Mouse enter trigger" />
      </Tooltip>
    </>
  );
};

Dauer der Bearbeitung​

Durch das Festlegen der duration-Eigenschaft wird festgelegt, wie lange es dauert, die QuickInfo ein- und auszublenden.

import { Button, Tooltip } from '@jutro/components';
import React from 'react';

export const TooltipDuration = () => {
  return (
    <>
      <Tooltip
        content="Hides in 2 seconds"
        duration={2000}
      >
        <Button
          label="Takes 2 seconds to be displayed"
          style={{ margin: '0 1rem 0 0' }}
        />
      </Tooltip>
      <Tooltip
        content="Hides immediately"
        duration={[500, 0]}
      >
        <Button label="Opens in 0.5 seconds" />
      </Tooltip>
    </>
  );
};

Optionen zum Ausblenden bei Klicken​

Sie können festlegen, wann die QuickInfo geschlossen wird, nachdem sie durch ein Klickereignis ausgelöst wurde:

  • Wenn auf andere Bereiche des Bildschirms geklickt wird
  • Wenn die Komponente erneut angeklickt wird
  • Nie
import { Button, Tooltip } from '@jutro/components';
import React from 'react';

export const TooltipHideOnClickOptions = () => {
  return (
    <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
      <Tooltip
        content="Click outside to close"
        placement="top"
        trigger="click"
      >
        <Button label="hideOnClick = true" />
      </Tooltip>
      <Tooltip
        content="Click again on the button to hide"
        placement="top"
        hideOnClick="toggle"
        trigger="click"
      >
        <Button label="hideOnClick = toggle" />
      </Tooltip>
      <Tooltip
        content="Cannot be closed"
        placement="top"
        hideOnClick={false}
        trigger="click"
      >
        <Button label="hideOnClick = false" />
      </Tooltip>
    </div>
  );
};

Eine neue Zeile zu einer QuickInfo-Meldung hinzufügen​

Es gibt 2 verschiedene Möglichkeiten, wie mehrere Zeilen in einer QuickInfo verwendet werden können:

Option 1: durch Interpolation der Meldung mit einem Zeilenumbruchzeichen.

import { Button, Tooltip } from '@jutro/components';
import React from 'react';

export const TooltipNewlineInterpolate = () => {
  return (
    <Tooltip
      content={{
        defaultMessage: 'This is a tooltip {br} this is a new line',
        args: { br: <br /> },
      }}
      placement="top"
      trigger="click"
    >
      <Button label="Click to open" />
    </Tooltip>
  );
};

Option 2: durch Übergeben eines JSX-Elements als Inhalt.

import { Button, Tooltip } from '@jutro/components';
import React from 'react';

export const TooltipNewlineJsx = () => {
  return (
    <Tooltip
      content={
        <p>
          This is a tooltip <br /> this is a new line
        </p>
      }
      placement="top"
      trigger="click"
    >
      <Button label="Click to open" />
    </Tooltip>
  );
};

Symbol mit QuickInfo​

Es gibt zwei Möglichkeiten, ein Symbol mit einer QuickInfo zu erstellen:

  • Verwenden der TooltipIcon-Komponente
  • Verwendung der Tooltip-Komponente in Kombination mit der Icon-Komponente

Die erste Option ist spezifischer, aber die Anzahl der verfügbaren Alternativen ist begrenzter.

TooltipIcon​

import { TooltipIcon } from '@jutro/components';
import React from 'react';

export const TooltipIconWithTooltipIcon = () => {
  return (
    <TooltipIcon
      href="https://docs.guidewire.com"
      link="Tooltip link"
      text="Tooltip text"
      title="This is a tooltip title"
    />
  );
};

Symbol und QuickInfo​

import { Icon, Tooltip } from '@jutro/components';
import React from 'react';

export const TooltipWithIconWithAnIconAndATooltip = () => {
  return (
    <Tooltip
      content="This is a tooltip"
      trigger="click"
    >
      <Icon icon="gw-warning" />
    </Tooltip>
  );
};