Tooltip & Popover

Tooltips
Static Tooltip

Four options are available: top, right, bottom, and left aligned.

Contextual Variations

Use contextual classes .tooltip-primary, .tooltip-* for apply any colour suited according to the nature of the task.

Triggers Click

You can select the action that triggers the tooltip either by adding the data-trigger="click" attribute or by setting the trigger parameter via Javascript.

Popover
Static Popover

Four options are available: top, right, bottom, and left aligned.

Popover Bottom

Sed posuere consectetur est at lobortis. Aenean eu leo quam.

Popover Top

Sed posuere consectetur est at lobortis. Aenean eu leo quam.

Popover Right

Sed posuere consectetur est at lobortis. Aenean eu leo quam.

Popover Left

Sed posuere consectetur est at lobortis. Aenean eu leo quam.

Contextual Variations

Use contextual classes .popover-primary, .popover-* for apply any colour suited according to the nature of the task.

Popover Primary

Sed posuere consectetur est at lobortis. Aenean eu leo quam.

Popover Success

Sed posuere consectetur est at lobortis. Aenean eu leo quam.

Popover Info

Sed posuere consectetur est at lobortis. Aenean eu leo quam.

Popover Danger

Sed posuere consectetur est at lobortis. Aenean eu leo quam.

Popover Warning

Sed posuere consectetur est at lobortis. Aenean eu leo quam.

Triggers Click

You can select the action that triggers the popover either by adding the data-trigger="click / hover" attribute or by setting the trigger parameter via Javascript.

Dismiss on click

You can select the action that triggers the popover either by adding the data-trigger="focus" attribute or by setting the trigger parameter via Javascript.