Tooltip | Pluralsight Design System

The purpose of a tooltip is to provide context and explain the function of a user interface element or feature. The content of a tooltip is limited to styled text. If more customization is necessary, consider the Dialog component which builds on the patterns of the tooltip.

Install
npm install @pluralsight/ps-design-system-tooltip
Import
import Tooltip from '@pluralsight/ps-design-system-tooltip

Examples

Triggers

Tooltips can appear automatically, or be triggered by hover, focus, tap or click.

import Button from '@pluralsight/ps-design-system-button'
import * as core from '@pluralsight/ps-design-system-core'
import { Below } from '@pluralsight/ps-design-system-position'
import Tooltip from '@pluralsight/ps-design-system-tooltip'
import React, { useState } from 'react'

const Example: React.FC = () => {
  const [isHovered, setHovered] = useState<boolean>(false)
  const [isClicked, setClicked] = useState<boolean>(false)

  const tooltip = (
    <Tooltip tailPosition={Tooltip.tailPositions.topCenter}>Tooltip</Tooltip>
  )

  return (
    <div className="examples">
      <div className="example">
        <Below show={tooltip}>
          <Button appearance={Button.appearances.secondary}>Look at me</Button>
        </Below>
      </div>

      <div className="example">
        <Below show={tooltip} when={isHovered}>
          <Button
            appearance={Button.appearances.secondary}
            onMouseEnter={() => setHovered(true)}
            onMouseLeave={() => setHovered(false)}
          >
            Hover me
          </Button>
        </Below>
      </div>

      <div className="example">
        <Below show={tooltip} when={isClicked}>
          <Button
            appearance={Button.appearances.secondary}
            onClick={() => setClicked(!isClicked)}
          >
            Click me
          </Button>
        </Below>
      </div>

      <style jsx>{`
        .examples {
          display: flex;
          padding: ${layout.spacingLarge};
        }
        .example {
          margin-right: calc(${layout.spacingLarge} * 2);
        }
        .example:last-child {
          margin-right: 0;
        }
      `}</style>
    </div>
  )
}

export default Example

Appearance

Tooltips come in 2 styles. Defaults to basic.

import Tooltip from '@pluralsight/ps-design-system-tooltip'
import React from 'react'

const Example: React.FC = () => (
  <div className="example-grid">
    <Tooltip appearance={Tooltip.appearances.basic}>basic</Tooltip>
    <Tooltip appearance={Tooltip.appearances.accent}>accent</Tooltip>
  </div>
)

export default Example

Tail

Tooltips can be shown with or without a tail (a directional indicator). To make the tail appear, use a Tooltip.tailPositions option.

import Tooltip from '@pluralsight/ps-design-system-tooltip'
import React from 'react'

const Example: React.FC = () => (
  <div className="example-grid">
    <Tooltip tailPosition={Tooltip.tailPositions.bottomCenter}>
      bottomCenter
    </Tooltip>
    <Tooltip tailPosition={Tooltip.tailPositions.bottomLeft}>
      bottomLeft
    </Tooltip>
    <Tooltip tailPosition={Tooltip.tailPositions.bottomRight}>
      bottomRight
    </Tooltip>
    <Tooltip tailPosition={Tooltip.tailPositions.leftCenter}>
      leftCenter
    </Tooltip>
    <Tooltip tailPosition={Tooltip.tailPositions.rightCenter}>
      rightCenter
    </Tooltip>
    <Tooltip tailPosition={Tooltip.tailPositions.topCenter}>topCenter</Tooltip>
    <Tooltip tailPosition={Tooltip.tailPositions.topLeft}>topLeft</Tooltip>
    <Tooltip tailPosition={Tooltip.tailPositions.topRight}>topRight</Tooltip>
  </div>
)

export default Example

Close button

Tooltips may be persistent until a user interaction closes them. For a close button in the top-right corner of the tooltip, provide a onClose callback.

import Tooltip from '@pluralsight/ps-design-system-tooltip'
import React from 'react'

const Example: React.FC = () => (
  <Tooltip onClose={_ => alert('close clicked')}>
    With a close button for those cases you want the tooltip to persist until
    closed.
  </Tooltip>
)

export default Example

Guidelines

Tooltips should be written in sentence case.

Don't

Write your tooltips to be concise and scannable.

Don't

Use accent appearance to gain user attention in cases such onboarding, introducing functionality, asking for input, or prompting action. A good rule of thumb is accent tooltips appear automatically, while basic tooltips appear as a user clicks or hovers to obtain more context.

Don't

Accessibility

WCAG 2.1 AA Compliance

100% axe-core tests

Manual audit

WAI-ARIA Patterns: Tooltip

Props

Name	Type	Description	Default
`appearance`	`basic \| accent`	visual style (from Tooltip.appearances)	`basic`
`onClose`	`Event => ()`	displays a close button, triggered on click
`tailPosition`	`bottomCenter \| bottomLeft \| bottomRight \| leftCenter \| rightCenter \| topCenter \| topLeft \| topRight`	positions a tail pointer (from Tooltip.tailPositions)