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.
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.
<div class="popover" role="tooltip">
<div class="arrow"></div>
<h3 class="popover-header">Popover title</h3>
<div class="popover-content">
...
</div>
</div>
Click to toggle popover:
Click on the help icon to toggle the popover
Options
Four directions
<!-- Popover on top and visible (add .in class) -->
<!-- Popover on right -->
<!-- Popover on bottom -->
<!-- Popover on left -->