Design System · Documentation → Components → Tooltip

Tooltips are simple floating objects containing short descriptive text which appear when a user hovers over a triggering element.

Design guidance

When and how to use this

Tooltips are useful for UI elements that lack a text label, like IconButton, because they provide such a text label for the triggering element on hover. You might also consider using a Tooltip to provide keyboard shortcut information for actions having one that isn't clearly indicated in the UI. Tooltip text should be short—one or two words on a single line.

We offer Tooltip in 2 color variants, dark and light. dark is the default and is recommended for most use cases, but if it doesn't offer sufficient contrast for your use case, try the light variant.

When to consider something else

If you need to provide longer text that spans multiple lines, consider using a Popover instead. Similarly, if you want to trigger your element on click rather than hover, a Popover is a better choice. Finally, Tooltip is not interactive, so if you need to allow a user to interact with the content in your element, use a Popover.

Figma

Drag in a Tooltip from the Overlay v2 library in the Assets pane in your Figma file. We offer the two color variants described above. We offer 3 arrow position variants. These are Top, Bottom, and None. Top is the default—generally a Tooltip should appear below its triggering element with the arrow on top. It is left to the designer to position the Tooltip appropriately. The equivalent default in React uses the props placement: bottom (places the element below its trigger) and hasArrow: true.

React

By default, Tooltip will use dark as its colorScheme and bottom as its placement, with flip set to true. This allows the component to reposition itself and its arrow based on proximity to the edge of the viewport.

live

<Stack direction="row" spacing="400">
  <Tooltip label="I'm a dark tooltip">
    <Button>Hover for a dark Tooltip</Button>
  </Tooltip>
  <Tooltip colorScheme="light" label="I'm a light tooltip">
    <Button>Hover for a light Tooltip</Button>
  </Tooltip>
</Stack>

Prop	Description
`label`	Sets the text shown in the `Tooltip`
`colorScheme`	Sets the background and text colors of the `Tooltip`
`placement`	Sets the position of the `Tooltip` relative to the triggering element. Defaults to `bottom`, but can also be `top`, `left`, `right`, or `auto`, where auto will render the Tooltip on the side with the most available space relative to the viewport.
`flip`	Boolean that allows a `Tooltip` with `placement: “bottom”` to dynamically flip to `placement: “top”` if the element is too close to the edge of the viewport. Defaults to `true`.
`hasArrow`	Boolean to show or hide an arrow on the `Tooltip`. Defaults to `true`.

Bootstrap

The Bootstrap Tooltip is a plugin powered by Popper.js which uses data-bs-* attributes on the triggering element to allow JavaScript to correctly position the Tooltip, and the trigger's title attribute to supply the text.

live

<div>
  <button
    type="button"
    class="btn btn-primary"
    id="liveTooltipBtn"
    data-bs-toggle="tooltip"
    data-bs-placement="bottom"
    title="I'm a tooltip!"
  >
    Hover for a Bootstrap Tooltip
  </button>
</div>

You must include the Bootstrap JavaScript bundle (which includes Popper) in your page to make your Tooltip work. Tooltip is opt-in, so you will need to add your own JavaScript in order to trigger them, similar to the example below. See the Bootstrap docs for more on this. The wrapping/stacking and positioning information in their docs applies as well.

document.addEventListener('DOMContentLoaded', function () {
  var tooltipTriggerList = [].slice.call(
    document.querySelectorAll('[data-bs-toggle="tooltip"]'),
  );
  var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
    return new bootstrap.Tooltip(tooltipTriggerEl);
  });
});

Toggle

Visually Hidden