Skip to main content

Tooltip

Tooltip in Storybook

Examples​

Check out the Usage section for details about how and when to use the Tooltip and TooltipIcon components.

Basic tooltip​

A basic tooltip added to a Button component. The tooltip is displayed when the cursor is moved over the button.

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>
  );
};

Using different triggers and positions​

You can trigger the tooltip on click, on focus, or on mouse enter. The tooltip is displayed in a different place depending on the placement prop.

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>
    </>
  );
};

Handling duration​

Setting the duration prop determines how long it takes to show and hide the tooltip.

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>
    </>
  );
};

Hide on click options​

It is possible to decide when the tooltip gets closed after being triggered by a click event:

  • when there is a click on other parts of the screen
  • when the component is clicked again
  • never
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>
  );
};

Add a new line in a tooltip message​

It is possible to have multiple lines in a tooltip in 2 different ways:

Option 1: by interpolating the message with a new line character.

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: by passing a JSX element as the content.

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>
  );
};

Icon with tooltip​

There are two options for creating an icon with a tooltip:

  • using the TooltipIcon component
  • using the Tooltip component in combination with the Icon component

The first option is more specific but more limited in the number of alternatives available.

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"
    />
  );
};

Icon and Tooltip​

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>
  );
};
Legal and Support Information
Copyright © 2001-2024 Guidewire Software, Inc.