Elements:Tooltips & Popovers
Tooltips and popovers allow for text and content to be shown when text or content is hovered or clicked. These can be useful for providing inline "hints" to site users as the read something.
Tooltips
Simply add
data-toggle="tooltip"
to any link element along with a
title="TEXT-TO-SHOW-ON-HOVER"
Example
Hover the clicks in the text below to see examples.
Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.
Tooltip placement
Adding a
data-placement="top|right|bottom|left"
attribute to the link element allows you to control the placement of the tooltip on hover.
Trigger
By default Tooltips are triggered when the link element is hovered but you can alter this behaviour by adding a
data-trigger="click|hover|focus"
attribute.
On click
On focus (closes when other element is clicked)
Tooltip with HTML content
To support HTML within the tooltip simply add the attribute
data-html="true"
to the link element.
Popovers
Popovers are similar to tooltips in functionality expect they contain more content and include a header and are generally suited to being trigger on "click" although they support the same "trigger" options as Tooltips above.
Trigger them by adding a
data-toggle="popover"
attribute to any elements along with a
title="HEADER-TEXT-TO-SHOW-ON-HOVER"
and
data-content="CONTENT-TEXT-TO-SHOW-ON-HOVER"
Example
Popover placement
Popovers support the same placement options as Tooltips above.
Trigger
Popovers support the same placement options as Tooltips above.
On hover
On focus (closes when other element is clicked)
Popover with HTML content
Like Tooltips to support HTML within the popover simply add the attribute
data-html="true"
to the link element.