Popovers & Tooltips

Popovers & Tooltips provide additional context to users about a connected item.

On this page:

Best Practices

  • Popovers and Tooltips may appear at the top, right, bottom, or left of the connected object.
  • If space is limited, both will automatically adjust their orientation regardless of initial placement.
  • Popovers have a header. It’s useful when explaining things in more detail than a Tooltip.
  • Tooltips do not have a header. It’s useful when only a short amount of text is needed.

Usage

Popover

<button type="button" class="btn btn-ui btn-sm" data-toggle="popover" data-placement="top" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

<button type="button" class="btn btn-ui btn-sm" data-toggle="popover" data-placement="right" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

<button type="button" class="btn btn-ui btn-sm" data-toggle="popover" data-placement="bottom" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

<button type="button" class="btn btn-ui btn-sm" data-toggle="popover" data-placement="left" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

Tooltips

<button type="button" class="btn btn-ui btn-sm" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
  <span class="fas fa-question" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-ui btn-sm" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
  <span class="fas fa-question" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-ui btn-sm" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
  <span class="fas fa-question" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-ui btn-sm" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
  <span class="fas fa-question" aria-hidden="true"></span>
</button>

Resources

Previous page
Next page