Popovers

Tooltips and popover styles

Get Started

1

Popovers

Popover triggers

Popovers can be triggered by click, on hover and on focus. To set up a popover on an element, use the data attribute data-toggle="popover". You can then pass other options with data attributes, like data-trigger="", data-placement="", data-title="" and data-content="" for the popover content.

Click me
Hover me
SHOW CODE

Popover positions

Use the data-placement="" attribute to position a popover. Available values are top, bottom, left and right.

Right
Top
Bottom
Left

Custom examples

You can customize header colors with more data attributes. Use data-title-backcolor="", data-title-textcolor="" and data-arrowcolor="" to customize your popover. Check the code examples.

Right
Top
Bottom
Left
SHOW CODE
2

Tooltips

Tooltip triggers

Tooltips can be triggered by click, on hover and on focus. To set up a tooltip on an element, use the data attribute data-toggle="popover". You can then pass other options with data attributes, like data-trigger="", data-placement="".

Click tooltip
Hover tooltip
SHOW CODE

Tooltip positions

Use the data-placement="" attribute to position a tooltip. Available values are top, bottom, left and right.

Right
Left
Top
Bottom