Popovers
Basic example
Popovers use a combination of both JavaScript and CSS to display.
The in initialization however is done entirely through HTML through classes and data attributes.
Data attributes
Data attributes placed on the target element define various behavior of the popover.
The data-popover-direction, data-popover-content, data-popover-title must be used for
the popover to be displayed correctly - All other data-attributes are optional.
| Attribute | Values | Behavior |
|---|---|---|
data-popover-direction |
top|bottom|left|right |
Changes the direction of the popover. |
data-popover-title |
string |
The string to placed as the popover title. |
data-popover-content |
string |
The string to placed as the popover text content. |
data-popover-type |
popover-primary|popover-info|popover-success|popover-warning|popover-danger |
The contextual classname. Changes the background color of the popover title. |
data-popover-event |
click|hover |
Defines whether the popover is displayed on :hover, or toggled with a click. |
data-popover-animate |
pop|fade |
Changes the popover animation when it is displayed. |
data-popover-target |
string (node id) |
Optional node id to clone and copy into the popover |
Templates
If you would prefer to customize the popover markup further, you can specify a DOM node by id
in the data-popover-target.
The library will clone the target node and insert the copy into the popover's contents.
Use the .hidden class on the target element to hide it so that it's not visible on the page.
This node is cloned and inserted into the popover!