Tooltips

Purpose

Users need additional, potentially optional information on demand.

Description

Tooltips provide information when an element is hovered over.

Tooltips are attached to an element and appear when the element is hovered over
The show and hide delays of a tooltip may vary depending on the need, but the default is 200ms to show and 0ms to hide

Use tooltips for:

Icon and button descriptions
Expanding shortened date/time stamps

Example HTML usage:

<!--Tooltips-->

<button
  class="btn btn-primary"
  type="button"
  data-toggle="tooltip"
  title="Tooltip"
>
  Tooltip
</button>

Positioning

Tooltips can be positioned either above, below, to the left, or to the right of target element. In many situations, tooltips should be positioned dynamically based on the available space around the target element.

Example HTML usage:

<!--Tooltips positions-->
<button
  type="button"
  class="btn btn-outline-secondary mb-2 ml-2"
  data-toggle="tooltip"
  data-placement="top"
  title="Tooltip on top"
>
  Tooltip on top
</button>
<button
  type="button"
  class="btn btn-outline-secondary mb-2"
  data-toggle="tooltip"
  data-placement="right"
  title="Tooltip on right"
>
  Tooltip on right
</button>

<button
  type="button"
  class="btn btn-outline-secondary mb-2"
  data-toggle="tooltip"
  data-placement="bottom"
  title="Tooltip on bottom"
>
  Tooltip on bottom
</button>

<button
  type="button"
  class="btn btn-outline-secondary mb-2"
  data-toggle="tooltip"
  data-placement="left"
  title="Tooltip on left"
>
  Tooltip on left
</button>

Content

The content of a tooltip can vary. It’s best to keep it to a few words.

Example HTML usage:

<!--Tooltips content-->
<button
  type="button"
  class="btn btn-secondary btn- mb-2 ml-2"
  data-toggle="tooltip"
  data-placement="right"
  title="Print"
>
  Short content
</button>
<button
  type="button"
  class="btn btn-secondary mb-2"
  data-toggle="tooltip"
  data-placement="right"
  title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. In semper volutpat ultrices. Mauris lobortis lacus vel ullamcorper vestibulum."
>
  Wrapping content
</button>

<button
  type="button"
  class="btn btn-secondary mb-2"
  data-html="true"
  data-toggle="tooltip"
  data-placement="right"
  title='<i class="align-middle material-icons">today</i> &nbsp; <strong>April 21</strong>, 2021'
>
  Rich content
</button>