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