Tooltips

A tooltip is a short descriptive messages that provides additional information about a UI element or feature. It is triggered when the element it relates to is hovered over or otherwise focused.

Code

Relies on the third-party librarybootstrap.js(4.6)for its features and functionality.View Bootstrap’s tooltip doc

Tooltips

Hover over a button to view the tooltip.

Tooltip Left Tooltip Top Tooltip Bottom Tooltip Right

Toggle dark mode

HTML

<button type="button" class="btn btn--brand" data-toggle="tooltip" data-placement="" title="">…</button>

NameAttributeCopy

1. tooltip contents
   title=""
   title=""Copy to Clipboard
2. on top
   data-placement=“top”
   data-placement="top"Copy to Clipboard
3. on left
   data-placement=“left”
   data-placement="left"Copy to Clipboard
4. on right
   data-placement=“right”
   data-placement="right"Copy to Clipboard
5. on bottom
   data-placement=“bottom”
   data-placement="bottom"Copy to Clipboard

React

import { Button, Tooltip, OverlayTrigger } from 'react-p21';

function () {
  return (
    <>
      <OverlayTrigger
        placement="top"
        overlay={
          <Tooltip>
            Tooltip contents
          </Tooltip>
        }
      >
        <Button variant="primary">Tooltip on top</Button>
      </OverlayTrigger>
    </>
  );
}

In Practice

Use tooltips for very short text that adds context to UI elements. Use sparingly.

• Displaying a tooltip requires a user to hover over (or focus on) the related element.
• Dismissing a tooltip requires a user to shift focus away from the element.
• Be mindful of placement - a tooltip should not obscure critical elements on the page.

Accessibility

• Tooltips should be operable using the keyboard alone.
• Tooltips should be announced by screen readers.

For more information, see our accessibility guidelines.

Design resources

View component in Figma