Top

Usage

The popover component must be initialized on an element that will trigger the display of the popovers, for example.

<a href="/" class="js-popover" data-popover="This string of text will be displayed in the popover.">Help</a>
$('.js-popover').popover();
The Popover component requires the Tooltip component, and will inherit all functionality from it. Jump over to the Tooltip documentation for more information on how to use this component.
Top

Variables

Variable Default Description
$popover-arrow-width 8 The border size for popover arrows.
$popover-tooltip-animations ("fade", "from-above", "from-below", "flip-rotate") A list of all animations to include in the CSS output.
$popover-class .popover CSS class name for the popover wrapper.
$popover-class-arrow .popover-arrow CSS class name for the popover arrow.
$popover-class-head .popover-head CSS class name for the popover header element.
$popover-class-body .popover-body CSS class name for the popover body element.
$popover-zindex 700 The z-index for the popover element.
Top

Options

Inherits all options from the parent Component.

Option Type Default Description
animation string The animation to use when displaying the popover. Available options are: fade, from-above, from-below, flip-rotate.
getContent string|function data-popover If a string is passed, fetch the content from the HTML attribute. If a string is passed in #id format, fetch the content from the HTML of the element. If a function is passed, use the return value as the content.
getTitle string|function title If a string is passed, fetch the content from the HTML attribute. If a function is passed, use the return value as the content.
position string top-center Where to position the tooltip relative to the target element. Available options are: top-left, top-center, top-right, center-left, center-right, bottom-left, bottom-center, bottom-right.
showLoading bool true Show the loading message while waiting for an AJAX request to complete.
showTitle bool true Show the popover title alongside the content if available.
template string <div class="popover">
<div class="popover-inner">
<div class="popover-head" data-popover-header></div>
<div class="popover-body" data-popover-content></div>
</div>
<div class="popover-arrow"></div>
</div>
The popover markup. The data-popover-* attributes are required.
wrapperClass string popovers The class name to set on the composite wrapper.
xOffset int 0 The offset in pixels to move the popover along the X axis.
yOffset int 0 The offset in pixels to move the popover along the Y axis.