Tooltips

Tooltips are used to display additional, related information when a user hovers over an element or focuses it using the keyboard. Tooltips should only be used to display non-crucial information or messaging.

Tooltips are mainly transient and dissapear once a user moves the cursor away from the element or unfocuses it, although they can also dissapear after a certain amount of time.

Tooltips should be used sparingly, as too many can cause cognitive overload. Don't use tooltips on actions are have a clear call-to-action, as redundancy is not needed if the copy and messaging outside of the tooltip is clear.

Use tooltips with:
Buttons, Information Bubbles , Links, Icons

Do not use tooltips with:
Images, Videos, components such as lists and radio buttons that contain copy (instead, use an information bubble)

    <ButtonToolbar>
      <OverlayTrigger
        key="top"
        placement="top"
        overlay={
          <Tooltip id="tooltip-top">
            Tooltip Data
          </Tooltip>
        }
      >
        <Button variant="secondary">Tooltip on Top</Button>
      </OverlayTrigger>
    </ButtonToolbar>
    

    <ButtonToolbar>
      <OverlayTrigger
        key="top"
        placement="top"
        overlay={
          <Popover id="popover-positioned-top">
            <Popover.Title as="h3">Popover Top</Popover.Title>
            <Popover.Content>
              <strong>Holy guacamole!</strong> Check this info.
            </Popover.Content>
          </Popover>
        }
      >
        <Button variant="secondary">Popover on Top</Button>
      </OverlayTrigger>
    </ButtonToolbar>
    

Accessibility

Tooltips Must Be Keyboard Navigable

Tooltips must be focusable and keyboard accessible. If using a tooltip that displays on hover, the element must display the information in the tooltip automatically upon keyboard focus. If using a popover that requires a user to click the element before showing the information in the tooltip, the element must allow you to activate the tooltip using keyboard shortcuts.