<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.">
<aclass="btn btn-sm btn-bd-light my-2 my-md-0"href="https://github.com/twbs/bootstrap/tree/v4-dev/site/docs/4.5/components/popovers.md"title="View and edit this file on GitHub"target="_blank"rel="noopener">View on GitHub</a>
<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.1/dist/umd/popper.min.js">popper.min.js</a> before bootstrap.js or use <codeclass="language-plaintext highlighter-rouge">bootstrap.bundle.min.js</code> / <codeclass="language-plaintext highlighter-rouge">bootstrap.bundle.js</code> which contains Popper.js in order for popovers to work!</li>
<li>If you’re building our JavaScript from source, it <ahref="/docs/4.5/getting-started/javascript/#util">requires <codeclass="language-plaintext highlighter-rouge">util.js</code></a>.</li>
<li>Zero-length <codeclass="language-plaintext highlighter-rouge">title</code> and <codeclass="language-plaintext highlighter-rouge">content</code> values will never show a popover.</li>
<li>Specify <codeclass="language-plaintext highlighter-rouge">container: 'body'</code> to avoid rendering problems in more complex components (like our input groups, button groups, etc).</li>
<li>Popovers for <codeclass="language-plaintext highlighter-rouge">.disabled</code> or <codeclass="language-plaintext 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="language-plaintext highlighter-rouge">.text-nowrap</code> on your <codeclass="language-plaintext highlighter-rouge"><a></code>s to avoid this behavior.</li>
<p>The animation effect of this component is dependent on the <codeclass="language-plaintext highlighter-rouge">prefers-reduced-motion</code> media query. See the <ahref="/docs/4.5/getting-started/accessibility/#reduced-motion">reduced motion section of our accessibility documentation</a>.</p>
<p>One way to initialize all popovers on a page would be to select them by their <codeclass="language-plaintext highlighter-rouge">data-toggle</code> attribute:</p>
<p>When you have some styles on a parent element that interfere with a popover, you’ll want to specify a custom <codeclass="language-plaintext 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>
<p>Use the <codeclass="language-plaintext highlighter-rouge">focus</code> trigger to dismiss popovers on the user’s next click of a different element than the toggle element.</p>
<p>For proper cross-browser and cross-platform behavior, you must use the <codeclass="language-plaintext highlighter-rouge"><a></code> tag, <em>not</em> the <codeclass="language-plaintext 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="language-plaintext highlighter-rouge">tabindex</code></a> attribute.</p>
<p>Elements with the <codeclass="language-plaintext 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="language-plaintext highlighter-rouge"><div></code> or <codeclass="language-plaintext highlighter-rouge"><span></code> and override the <codeclass="language-plaintext highlighter-rouge">pointer-events</code> on the disabled element.</p>
<p>For disabled popover triggers, you may also prefer <codeclass="language-plaintext 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>
<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="language-plaintext highlighter-rouge"><span></code>s) can be made focusable by adding the <codeclass="language-plaintext 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="language-plaintext 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="language-plaintext 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="language-plaintext 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="language-plaintext 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>
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <codeclass="language-plaintext highlighter-rouge">data-</code>, as in <codeclass="language-plaintext highlighter-rouge">data-animation=""</code>.</p>
<p>Note that for security reasons the <codeclass="language-plaintext highlighter-rouge">sanitize</code>, <codeclass="language-plaintext highlighter-rouge">sanitizeFn</code> and <codeclass="language-plaintext highlighter-rouge">whiteList</code> options cannot be supplied using data attributes.</p>
<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/docs/v1/#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/docs/v1/#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/docs/v1/#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.5/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="language-plaintext 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="language-plaintext 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="language-plaintext highlighter-rouge">shown.bs.popover</code> or <codeclass="language-plaintext 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="language-plaintext highlighter-rouge">selector</code> option</a>) cannot be individually destroyed on descendant trigger elements.</p>
