Skip to Main Content

Pelican Design System icon Pelican Design System Popovers & Tooltips

Popovers & Tooltips

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

Edit on GitHub

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 only short amount of text is needed.

Usage

Popover

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

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

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

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

Tooltips

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

Resources

Previous
Next
Page top