<metaname="twitter:description"content="Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your site.">
<metaproperty="og:description"content="Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your site.">
<p>Things to know when using the popover plugin:</p>
<ul>
<li>Popovers rely on the 3rd party library <ahref="https://popper.js.org/">Popper.js</a> for positioning. You must include <ahref="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js">popper.min.js</a> before bootstrap.js or use <codeclass="highlighter-rouge">bootstrap.bundle.min.js</code> / <codeclass="highlighter-rouge">bootstrap.bundle.js</code> which contains Popper.js in order for popovers to work!</li>
<li>Popovers require the <ahref="/docs/4.4/components/tooltips/">tooltip plugin</a> as a dependency.</li>
<li>If you’re building our JavaScript from source, it <ahref="/docs/4.4/getting-started/javascript/#util">requires <codeclass="highlighter-rouge">util.js</code></a>.</li>
<li>Popovers are opt-in for performance reasons, so <strong>you must initialize them yourself</strong>.</li>
<li>Zero-length <codeclass="highlighter-rouge">title</code> and <codeclass="highlighter-rouge">content</code> values will never show a popover.</li>
<li>Specify <codeclass="highlighter-rouge">container: 'body'</code> to avoid rendering problems in more complex components (like our input groups, button groups, etc).</li>
<li>Triggering popovers on hidden elements will not work.</li>
<li>Popovers for <codeclass="highlighter-rouge">.disabled</code> or <codeclass="highlighter-rouge">disabled</code> elements must be triggered on a wrapper element.</li>
<li>When triggered from anchors that wrap across multiple lines, popovers will be centered between the anchors’ overall width. Use <codeclass="highlighter-rouge">.text-nowrap</code> on your <codeclass="highlighter-rouge"><a></code>s to avoid this behavior.</li>
<li>Popovers must be hidden before their corresponding elements have been removed from the DOM.</li>
<li>Popovers can be triggered thanks to an element inside a shadow DOM.</li>
</ul>
<divclass="bd-callout bd-callout-info">
<p>The animation effect of this component is dependent on the <codeclass="highlighter-rouge">prefers-reduced-motion</code> media query. See the <ahref="/docs/4.4/getting-started/accessibility/#reduced-motion">reduced motion section of our accessibility documentation</a>.</p>
</div>
<p>Keep reading to see how popovers work with some examples.</p>
<h2id="example-using-the-container-option">Example: Using the <codeclass="highlighter-rouge">container</code> option</h2>
<p>When you have some styles on a parent element that interfere with a popover, you’ll want to specify a custom <codeclass="highlighter-rouge">container</code> so that the popover’s HTML appears within that element instead.</p>
<buttontype="button"class="btn btn-lg btn-danger"data-toggle="popover"title="Popover title"data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
</div>
<figureclass="highlight"><pre><codeclass="language-html"data-lang="html"><spanclass="nt"><button</span><spanclass="na">type=</span><spanclass="s">"button"</span><spanclass="na">class=</span><spanclass="s">"btn btn-lg btn-danger"</span><spanclass="na">data-toggle=</span><spanclass="s">"popover"</span><spanclass="na">title=</span><spanclass="s">"Popover title"</span><spanclass="na">data-content=</span><spanclass="s">"And here's some amazing content. It's very engaging. Right?"</span><spanclass="nt">></span>Click to toggle popover<spanclass="nt"></button></span></code></pre></figure>
<h3id="four-directions">Four directions</h3>
<p>Four options are available: top, right, bottom, and left aligned.</p>
<divclass="bd-example popover-demo">
<divclass="bd-example-popovers">
<buttontype="button"class="btn btn-secondary"data-container="body"data-toggle="popover"data-placement="top"data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on top
</button>
<buttontype="button"class="btn btn-secondary"data-container="body"data-toggle="popover"data-placement="right"data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on right
</button>
<buttontype="button"class="btn btn-secondary"data-container="body"data-toggle="popover"data-placement="bottom"data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on bottom
</button>
<buttontype="button"class="btn btn-secondary"data-container="body"data-toggle="popover"data-placement="left"data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on left
</button>
</div>
</div>
<figureclass="highlight"><pre><codeclass="language-html"data-lang="html"><spanclass="nt"><button</span><spanclass="na">type=</span><spanclass="s">"button"</span><spanclass="na">class=</span><spanclass="s">"btn btn-secondary"</span><spanclass="na">data-container=</span><spanclass="s">"body"</span><spanclass="na">data-toggle=</span><spanclass="s">"popover"</span><spanclass="na">data-placement=</span><spanclass="s">"top"</span><spanclass="na">data-content=</span><spanclass="s">"Vivamus sagittis lacus vel augue laoreet rutrum faucibus."</span><spanclass="nt">></span>
Popover on top
<spanclass="nt"></button></span>
<spanclass="nt"><button</span><spanclass="na">type=</span><spanclass="s">"button"</span><spanclass="na">class=</span><spanclass="s">"btn btn-secondary"</span><spanclass="na">data-container=</span><spanclass="s">"body"</span><spanclass="na">data-toggle=</span><spanclass="s">"popover"</span><spanclass="na">data-placement=</span><spanclass="s">"right"</span><spanclass="na">data-content=</span><spanclass="s">"Vivamus sagittis lacus vel augue laoreet rutrum faucibus."</span><spanclass="nt">></span>
sagittis lacus vel augue laoreet rutrum faucibus."</span><spanclass="nt">></span>
Popover on bottom
<spanclass="nt"></button></span>
<spanclass="nt"><button</span><spanclass="na">type=</span><spanclass="s">"button"</span><spanclass="na">class=</span><spanclass="s">"btn btn-secondary"</span><spanclass="na">data-container=</span><spanclass="s">"body"</span><spanclass="na">data-toggle=</span><spanclass="s">"popover"</span><spanclass="na">data-placement=</span><spanclass="s">"left"</span><spanclass="na">data-content=</span><spanclass="s">"Vivamus sagittis lacus vel augue laoreet rutrum faucibus."</span><spanclass="nt">></span>
<h3id="dismiss-on-next-click">Dismiss on next click</h3>
<p>Use the <codeclass="highlighter-rouge">focus</code> trigger to dismiss popovers on the user’s next click of a different element than the toggle element.</p>
<divclass="bd-callout bd-callout-danger">
<h4id="specific-markup-required-for-dismiss-on-next-click">Specific markup required for dismiss-on-next-click</h4>
<p>For proper cross-browser and cross-platform behavior, you must use the <codeclass="highlighter-rouge"><a></code> tag, <em>not</em> the <codeclass="highlighter-rouge"><button></code> tag, and you also must include a <ahref="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex"><codeclass="highlighter-rouge">tabindex</code></a> attribute.</p>
</div>
<divclass="bd-example">
<atabindex="0"class="btn btn-lg btn-danger"role="button"data-toggle="popover"data-trigger="focus"title="Dismissible popover"data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
</div>
<figureclass="highlight"><pre><codeclass="language-html"data-lang="html"><spanclass="nt"><a</span><spanclass="na">tabindex=</span><spanclass="s">"0"</span><spanclass="na">class=</span><spanclass="s">"btn btn-lg btn-danger"</span><spanclass="na">role=</span><spanclass="s">"button"</span><spanclass="na">data-toggle=</span><spanclass="s">"popover"</span><spanclass="na">data-trigger=</span><spanclass="s">"focus"</span><spanclass="na">title=</span><spanclass="s">"Dismissible popover"</span><spanclass="na">data-content=</span><spanclass="s">"And here's some amazing content. It's very engaging. Right?"</span><spanclass="nt">></span>Dismissible popover<spanclass="nt"></a></span></code></pre></figure>
<p>Elements with the <codeclass="highlighter-rouge">disabled</code> attribute aren’t interactive, meaning users cannot hover or click them to trigger a popover (or tooltip). As a workaround, you’ll want to trigger the popover from a wrapper <codeclass="highlighter-rouge"><div></code> or <codeclass="highlighter-rouge"><span></code> and override the <codeclass="highlighter-rouge">pointer-events</code> on the disabled element.</p>
<p>For disabled popover triggers, you may also prefer <codeclass="highlighter-rouge">data-trigger="hover"</code> so that the popover appears as immediate visual feedback to your users as they may not expect to <em>click</em> on a disabled element.</p>
<h3id="making-popovers-work-for-keyboard-and-assistive-technology-users">Making popovers work for keyboard and assistive technology users</h3>
<p>To allow keyboard users to activate your popovers, you should only add them to HTML elements that are traditionally keyboard-focusable and interactive (such as links or form controls). Although arbitrary HTML elements (such as <codeclass="highlighter-rouge"><span></code>s) can be made focusable by adding the <codeclass="highlighter-rouge">tabindex="0"</code> attribute, this will add potentially annoying and confusing tab stops on non-interactive elements for keyboard users, and most assistive technologies currently do not announce the popover’s content in this situation. Additionally, do not rely solely on <codeclass="highlighter-rouge">hover</code> as the trigger for your popovers, as this will make them impossible to trigger for keyboard users.</p>
<p>While you can insert rich, structured HTML in popovers with the <codeclass="highlighter-rouge">html</code> option, we strongly recommend that you avoid adding an excessive amount of content. The way popovers currently work is that, once displayed, their content is tied to the trigger element with the <codeclass="highlighter-rouge">aria-describedby</code> attribute. As a result, the entirety of the popover’s content will be announced to assistive technology users as one long, uninterrupted stream.</p>
<p>Additionally, while it is possible to also include interactive controls (such as form elements or links) in your popover (by adding these elements to the <codeclass="highlighter-rouge">whiteList</code> or allowed attributes and tags), be aware that currently the popover does not manage keyboard focus order. When a keyboard user opens a popover, focus remains on the triggering element, and as the popover usually does not immediately follow the trigger in the document’s structure, there is no guarantee that moving forward/pressing <kbd>TAB</kbd> will move a keyboard user into the popover itself. In short, simply adding interactive controls to a popover is likely to make these controls unreachable/unusable for keyboard users and users of assistive technologies, or at the very least make for an illogical overall focus order. In these cases, consider using a modal dialog instead.</p>
</div>
<h3id="options">Options</h3>
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <codeclass="highlighter-rouge">data-</code>, as in <codeclass="highlighter-rouge">data-animation=""</code>.</p>
<divclass="bd-callout bd-callout-warning">
<p>Note that for security reasons the <codeclass="highlighter-rouge">sanitize</code>, <codeclass="highlighter-rouge">sanitizeFn</code> and <codeclass="highlighter-rouge">whiteList</code> options cannot be supplied using data attributes.</p>
</div>
<tableclass="table table-bordered table-striped">
<thead>
<tr>
<thstyle="width: 100px;">Name</th>
<thstyle="width: 100px;">Type</th>
<thstyle="width: 50px;">Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>animation</td>
<td>boolean</td>
<td>true</td>
<td>Apply a CSS fade transition to the popover</td>
</tr>
<tr>
<td>container</td>
<td>string | element | false</td>
<td>false</td>
<td>
<p>Appends the popover to a specific element. Example: <code>container: 'body'</code>. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element -which will prevent the popover from floating away from the triggering element during a window resize.</p>
</td>
</tr>
<tr>
<td>content</td>
<td>string | element | function</td>
<td>''</td>
<td>
<p>Default content value if <code>data-content</code> attribute isn't present.</p>
<p>If a function is given, it will be called with its <code>this</code> reference set to the element that the popover is attached to.</p>
</td>
</tr>
<tr>
<td>delay</td>
<td>number | object</td>
<td>0</td>
<td>
<p>Delay showing and hiding the popover (ms) - does not apply to manual trigger type</p>
<p>If a number is supplied, delay is applied to both hide/show</p>
<p>Object structure is: <code>delay: { "show": 500, "hide": 100 }</code></p>
</td>
</tr>
<tr>
<td>html</td>
<td>boolean</td>
<td>false</td>
<td>Insert HTML into the popover. If false, jQuery's <code>text</code> method will be used to insert content into the DOM. Use text if you're worried about XSS attacks.</td>
</tr>
<tr>
<td>placement</td>
<td>string | function</td>
<td>'right'</td>
<td>
<p>How to position the popover - auto | top | bottom | left | right.<br/>When <code>auto</code> is specified, it will dynamically reorient the popover.</p>
<p>When a function is used to determine the placement, it is called with the popover DOM node as its first argument and the triggering element DOM node as its second. The <code>this</code> context is set to the popover instance.</p>
</td>
</tr>
<tr>
<td>selector</td>
<td>string | false</td>
<td>false</td>
<td>If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See <ahref="https://github.com/twbs/bootstrap/issues/4215">this</a> and <ahref="https://codepen.io/Johann-S/pen/djJYPb">an informative example</a>.</td>
<p>Base HTML to use when creating the popover.</p>
<p>The popover's <code>title</code> will be injected into the <code>.popover-header</code>.</p>
<p>The popover's <code>content</code> will be injected into the <code>.popover-body</code>.</p>
<p><code>.arrow</code> will become the popover's arrow.</p>
<p>The outermost wrapper element should have the <code>.popover</code> class.</p>
</td>
</tr>
<tr>
<td>title</td>
<td>string | element | function</td>
<td>''</td>
<td>
<p>Default title value if <code>title</code> attribute isn't present.</p>
<p>If a function is given, it will be called with its <code>this</code> reference set to the element that the popover is attached to.</p>
</td>
</tr>
<tr>
<td>trigger</td>
<td>string</td>
<td>'click'</td>
<td>How popover is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space. <code>manual</code> cannot be combined with any other trigger.</td>
</tr>
<tr>
<td>offset</td>
<td>number | string</td>
<td>0</td>
<td>Offset of the popover relative to its target. For more information refer to Popper.js's <ahref="https://popper.js.org/popper-documentation.html#modifiers..offset.offset">offset docs</a>.</td>
</tr>
<tr>
<td>fallbackPlacement</td>
<td>string | array</td>
<td>'flip'</td>
<td>Allow to specify which position Popper will use on fallback. For more information refer to
<td>Overflow constraint boundary of the popover. Accepts the values of <code>'viewport'</code>, <code>'window'</code>, <code>'scrollParent'</code>, or an HTMLElement reference (JavaScript only). For more information refer to Popper.js's <ahref="https://popper.js.org/popper-documentation.html#modifiers..preventOverflow.boundariesElement">preventOverflow docs</a>.</td>
</tr>
<tr>
<td>sanitize</td>
<td>boolean</td>
<td>true</td>
<td>Enable or disable the sanitization. If activated <code>'template'</code>, <code>'content'</code> and <code>'title'</code> options will be sanitized.</td>
<td>Object which contains allowed attributes and tags</td>
</tr>
<tr>
<td>sanitizeFn</td>
<td>null | function</td>
<td>null</td>
<td>Here you can supply your own sanitize function. This can be useful if you prefer to use a dedicated library to perform sanitization.</td>
</tr>
<tr>
<td>popperConfig</td>
<td>null | object</td>
<td>null</td>
<td>To change Bootstrap's default Popper.js config, see <ahref="https://popper.js.org/popper-documentation.html#Popper.Defaults">Popper.js's configuration</a></td>
</tr>
</tbody>
</table>
<divclass="bd-callout bd-callout-info">
<h4id="data-attributes-for-individual-popovers">Data attributes for individual popovers</h4>
<p>Options for individual popovers can alternatively be specified through the use of data attributes, as explained above.</p>
</div>
<h3id="methods">Methods</h3>
<divclass="bd-callout bd-callout-danger">
<h4id="asynchronous-methods-and-transitions">Asynchronous methods and transitions</h4>
<p>All API methods are <strong>asynchronous</strong> and start a <strong>transition</strong>. They return to the caller as soon as the transition is started but <strong>before it ends</strong>. In addition, a method call on a <strong>transitioning component will be ignored</strong>.</p>
<p><ahref="/docs/4.4/getting-started/javascript/">See our JavaScript documentation for more information</a>.</p>
<p>Reveals an element’s popover. <strong>Returns to the caller before the popover has actually been shown</strong> (i.e. before the <codeclass="highlighter-rouge">shown.bs.popover</code> event occurs). This is considered a “manual” triggering of the popover. Popovers whose title and content are both zero-length are never displayed.</p>
<p>Hides an element’s popover. <strong>Returns to the caller before the popover has actually been hidden</strong> (i.e. before the <codeclass="highlighter-rouge">hidden.bs.popover</code> event occurs). This is considered a “manual” triggering of the popover.</p>
<p>Toggles an element’s popover. <strong>Returns to the caller before the popover has actually been shown or hidden</strong> (i.e. before the <codeclass="highlighter-rouge">shown.bs.popover</code> or <codeclass="highlighter-rouge">hidden.bs.popover</code> event occurs). This is considered a “manual” triggering of the popover.</p>
<p>Hides and destroys an element’s popover. Popovers that use delegation (which are created using <ahref="#options">the <codeclass="highlighter-rouge">selector</code> option</a>) cannot be individually destroyed on descendant trigger elements.</p>
