Skip to contentShopify logoPolaris

Tooltip

Tooltips are floating labels that briefly explain the function of a user interface element. They can be triggered when merchants hover, focus, tap, or click.

Use only when necessary to provide an explanation for an interface element.

import {Tooltip, TextStyle} from '@shopify/polaris';
import React from 'react';

function TooltipExample() {
  return (
    <div style={{padding: '75px 0'}}>
      <Tooltip active content="This order has shipping labels.">
        <TextStyle variation="strong">Order #1001</TextStyle>
      </Tooltip>
    </div>
  );
}

Use when the tooltip overlays interactive elements when active, for example a form input. The dismissOnMouseOut prop prevents the tooltip from remaining active when mouse hover or focus leaves its children and enters the tooltip's content.

import {ButtonGroup, Tooltip, Button, TextField} from '@shopify/polaris';
import React from 'react';

function TooltipExample() {
  return (
    <div style={{width: '200px'}}>
      <ButtonGroup segmented fullWidth>
        <Tooltip content="Bold" dismissOnMouseOut>
          <Button>B</Button>
        </Tooltip>
        <Tooltip content="Italic" dismissOnMouseOut>
          <Button>I</Button>
        </Tooltip>
        <Tooltip content="Underline" dismissOnMouseOut>
          <Button>U</Button>
        </Tooltip>
        <Tooltip content="Strikethrough" dismissOnMouseOut>
          <Button>S</Button>
        </Tooltip>
      </ButtonGroup>
      <TextField
        label="Product title"
        autoComplete="off"
        labelHidden
        multiline
      />
    </div>
  );
}

Props

Want to help make this feature better? Please share your feedback.

interface TooltipProps
children?React.ReactNode

The element that will activate to tooltip.

contentReact.ReactNode

The content to display within the tooltip.

active?boolean

Toggle whether the tooltip is visible.

dismissOnMouseOut?boolean

Dismiss tooltip when not interacting with its children.

preferredPosition?'above' | 'below' | 'mostSpace'

The direction the tooltip tries to display.

Defaults to 'below'.

activatorWrapper?string

The element type to wrap the activator in.

Defaults to 'span'.

accessibilityLabel?string

Visually hidden text for screen readers.

Best practices

Tooltips should:

  • Provide useful, additional information or clarification.
  • Succinctly describe or expand on the element they point to.
  • Be provided for icon-only buttons or a button with an associated keyboard shortcut.
  • Not be used to communicate critical information, including errors in forms or other interaction feedback.
  • Not contain any links or buttons.
  • Be used sparingly. If you’re building something that requires a lot of tooltips, work on clarifying the design and the language in the experience.

Content guidelines

Basic tooltips

Tooltips should:

  • Be written in sentence case
  • Be concise and scannable
  • Not be used to communicate error messages or important account information

Do

Post reach is the number of people who have seen your post in their News Feed.

Don’t

To continue using Shopify, this amount must be paid immediately.