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 

<div class="button btn-align" data-toggle="popover"
     data-placement="top"
     title="Click popover"
     data-content="And here's some amazing content. It's very engaging. Right?">
    Click me</div>
                            

<div class="button btn-align" data-toggle="popover"
     data-placement="top"
     title="Click popover"
     data-trigger="hover"
     data-content="And here's some amazing content. It's very engaging. Right?">
    Click me</div>
                            

<div class="button btn-align" data-toggle="popover"
     data-placement="top"
     title="Click popover"
     data-trigger="focus"
     data-content="And here's some amazing content. It's very engaging. Right?">
    Focus me</div>

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 

<div class="button btn-align" data-toggle="popover"
         data-placement="right"
         title="Right"
         data-trigger="hover"
         data-title-backcolor="#eda514"
         data-title-textcolor="#fff"
         data-content="A right aligned popover is a really boring thing in the real life.">
        Right</div>
                            

<div class="button btn-align" data-toggle="popover"
         data-placement="top"
         title="Top"
         data-trigger="hover"
         data-title-backcolor="#fff"
         data-content="A top aligned popover is a really boring thing in the real life.">
        Top</div>
                            

<div class="button btn-align" data-toggle="popover"
         data-placement="bottom"
         title="Bottom"
         data-trigger="hover"
         data-title-backcolor="#00b289"
         data-title-textcolor="#fff"
         data-arrowcolor="#00b289"
         data-content="A bottom aligned popover is a really boring thing in the real life.">
        Bottom</div>
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 

<div class="button btn-align" data-toggle="tooltip"
     data-placement="top"
     data-title="Top tooltip"
     data-trigger="click"
    Click me</div>
                            

<div class="button btn-align" data-toggle="tooltip"
     data-placement="top"
     data-title="Top tooltip"
     data-trigger="hover"
    Hover me</div>
                            

<div class="button btn-align" data-toggle="tooltip"
     data-placement="top"
     data-title="Top tooltip"
     data-trigger="focus"
    Focus me</div>

Tooltip positions

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

Right
Left
Top
Bottom