Flyouts
beta

The Design Language provides two types of flyouts: Popovers, and Tooltips.

Usage Rules: Popovers activate on click and tooltips activate on hover. Popovers should appear only one at a time. If an icon or button is clicked that should display a popover, any already visible popover should close. If the content is more than two lines long, use a popover. Otherwise use a tooltip. There can be no text formatting in a popover or a tooltip. If your content is longer than a short paragraph or you require text formatting, you should use a modal.

Technical Information: Both popovers and tooltips are based on Bootstrap CSS and JavaScript code. The appropriate flyout is generated on click for popovers and on hover for tooltips. You must source the javascript file bootstrap.min.js and also include the jQuery code $('[data-toggle="popover"]').popover(); and/or $('[data-toggle="tooltip"]').tooltip(); locally. Use the documentation of the JavaScript platform for your project as guidance.

Popovers should appear on click only. They should automatically appear to the immediate top, right, left, or bottom of the link or linked image or icon. The link used is commonly "help_outline", as in the examples below. A popover's content is text only. If you need to use HTML in the content or the content is longer than a short paragraph, you should be using a Modal instead.

Click an icon below to view the popover.

info_outline Popover on top
info_outline Popover on right
info_outline Popover on bottom
info_outline Popover on left

  info_outline
 Popover on top

  info_outline
 Popover on right

  info_outline
 Popover on bottom

  info_outline
 Popover on left

A tooltip should appear on hover only. It should automatically appear to the immediate top, right, left, or bottom of the link or linked image or icon. A tooltip's content is text only and should be no longer than a sentence or two. If the content is longer, use a Popover instead. If the content requires HTML, a Modal is your best option.

Hover over an icon below to view the tooltip. (Touch on mobile)

info_outline Tooltip on top
info_outline Tooltip on right
info_outline Tooltip on bottom
info_outline Tooltip on left

  info_outline
 Tooltip on top

  info_outline
 Tooltip on right

  info_outline
 Tooltip on bottom

  info_outline
 Tooltip on left