Skip to content

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.

Awesome Features

99.9% Uptime / Free Upgrades / Fully Responsive / Bug Free
Theme Colours

Green Red Blue Purple Pink Orange Lime Blue-dark Red-dark Brown Cyan-dark Yellow Slate Olive Teal Green-bright

Cookies are NOT enabled so colour selection is not persistent.

Back to main homepage

Back to intro page