1. Docs
  2. Components
  3. Popovers
Buy Now Contact

Popovers

Popovers are bigger tooltips and fires only on user click (this interaction can be changed).


<a type="button" class="c-btn c-btn--secondary" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." tabindex="0" href="#!">
    Example Popover
</a>

Direction Variations

Define popover direction by changing data-placement to the desired direction.


<a type="button" class="c-btn c-btn--secondary" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." tabindex="0" href="#!">
    Top Popover
</a>

<a type="button" class="c-btn c-btn--secondary" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." tabindex="0" href="#!">
    Right Popover
</a>

<a type="button" class="c-btn c-btn--secondary" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." tabindex="0" href="#!">
    Bottom Popover
</a>

<a type="button" class="c-btn c-btn--secondary" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." tabindex="0" href="#!">
    Left Popover
</a>

Javascript

This component’s interactions are powered by Bootstrap. Refer to their popover documentation for Javascript usage.

You will notice that for certain components there is a mixture of Dashboard class names and Bootstrap class names that is because Bootstrap’s Javascript requires certain elements to have certain class names. Dashboard components does not use any of these classes for styling.