<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.">
<li>Popovers rely on the 3rd party library <ahref="https://popper.js.org">Popper.js</a> for positioning. You must include <ahref="https://unpkg.com/popper.js@1.12.6/dist/umd/popper.js">popper.min.js</a> before bootstrap.js in order for popovers to work!</li>
<li>Popovers require the <ahref="/bootstrap-material-design/docs/4.0/components/tooltips/">tooltip plugin</a> as a dependency.</li>
<li>If building our JS from source, it <ahref="/bootstrap-material-design/docs/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 hyperlinks that span multiple lines, popovers will be centered. Use <codeclass="highlighter-rouge">white-space: 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>
</ul>
<p>Got all that? Great, let’s see how they 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>
<p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
</div>
</div>
<divclass="clearfix"></div>
</div>
<h2id="live-demo">Live demo</h2>
<divclass="bd-example"data-example-id="">
<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>
<divclass="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></div>
<h3id="four-directions">Four directions</h3>
<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 next click that the user makes.</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"data-example-id="">
<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>
<divclass="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></div>
<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>
<td>Apply a CSS fade transition to the popover</td>
</tr>
<tr>
<td>container</td>
<td>string | 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</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://jsbin.com/zopod/1/edit">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. `manual` 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
<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 returns 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>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 both title and content are 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>
