Popover

Popovers are triggered by click or mouseover. An example of popovers are inline help, which are popovers triggered by clicking on a help icon. Read more about inline help in the UX Guidelines.

Use when

  • Popovers are used when the information is only temporarily needed by the user.
  • An input, or other element requires a longer explanation than is possible to put in a tooltip. E.g. The meaning of a particular option, the rules that govern what input is asked for, or the expected format.

For this component you need JavaScript! We recommend to create your own scripts following the structure from the examples below.
You can try out this 3rd party library Popper for positioning the popovers.

Basic design

Static popover

Popover top

Poor old tree. Let's just drop a little Evergreen right here. Let your imagination be your guide. There isn't a rule. You just practice and find out which way works best for you. Talk to trees, look at the birds. Whatever it takes.

Popover right

Poor old tree. Let's just drop a little Evergreen right here. Let your imagination be your guide. There isn't a rule. You just practice and find out which way works best for you. Talk to trees, look at the birds. Whatever it takes.

Popover bottom

Poor old tree. Let's just drop a little Evergreen right here. Let your imagination be your guide. There isn't a rule. You just practice and find out which way works best for you. Talk to trees, look at the birds. Whatever it takes.

Popover left

Poor old tree. Let's just drop a little Evergreen right here. Let your imagination be your guide. There isn't a rule. You just practice and find out which way works best for you. Talk to trees, look at the birds. Whatever it takes.

Click to toggle popover:

Click on the help icon to toggle the popover

Options

Four directions

				
// Popover html template
<div class="popover" role="tooltip">
    <div class="arrow"></div>
    <h3 class="popover-header">Popover title</h3>
    <div class="popover-content">
        ...
    </div>
</div>

// Popover on top and visible
<div class="popover top in" role="tooltip">
    <div class="arrow"></div>
    <h3 class="popover-header">Popover title</h3>
    <div class="popover-content">
        ...
    </div>
</div>

// Popover on right
<div class="popover right in" role="tooltip">
    <div class="arrow"></div>
    <h3 class="popover-header">Popover title</h3>
    <div class="popover-content">
        ...
    </div>
</div>

// Popover on bottom
<div class="popover bottom in" role="tooltip">
    <div class="arrow"></div>
    <h3 class="popover-header">Popover title</h3>
    <div class="popover-content">
        ...
    </div>
</div>

// Popover on left
<div class="popover left in" role="tooltip">
    <div class="arrow"></div>
    <h3 class="popover-header">Popover title</h3>
    <div class="popover-content">
        ...
    </div>
</div>