Popovers & Tooltips

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.
• Use concise amounts of text in Popovers
• Use sparse, just a few words, of text in Tolltips
• Prefer visible labels to tooltips

Usage

Popover

See the Pen Pagination by LA Gov Design Team (@lagovdesignteam) on CodePen.

Tooltips

See the Pen Popovers by LA Gov Design Team (@lagovdesignteam) on CodePen.

Resources

• Bootstrap Documentation - Popovers
• Bootstrap Documentation - Tooltips