--- layout: docs title: Popovers description: Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your site. group: components toc: true --- ## Overview Things to know when using the popover plugin: - Popovers rely on the 3rd party library [Popper.js](https://popper.js.org) for positioning. You must include [popper.min.js]({{ site.cdn.popper }}) before bootstrap.js in order for popovers to work! - Popovers require the [tooltip plugin]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/tooltips/) as a dependency. - If building our JS from source, it [requires `util.js`]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/javascript/#util). - Popovers are opt-in for performance reasons, so **you must initialize them yourself**. - Zero-length `title` and `content` values will never show a popover. - Specify `container: 'body'` to avoid rendering problems in more complex components (like our input groups, button groups, etc). - Triggering popovers on hidden elements will not work. - Popovers for `.disabled` or `disabled` elements must be triggered on a wrapper element. - When triggered from hyperlinks that span multiple lines, popovers will be centered. Use `white-space: nowrap;` on your ``s to avoid this behavior. - Popovers must be hidden before their corresponding elements have been removed from the DOM. Got all that? Great, let's see how they work with some examples. ## Example: Enable popovers everywhere One way to initialize all popovers on a page would be to select them by their `data-toggle` attribute: {% highlight js %} $(function () { $('[data-toggle="popover"]').popover() }) {% endhighlight %} ## Example: Using the `container` option When you have some styles on a parent element that interfere with a popover, you'll want to specify a custom `container` so that the popover's HTML appears within that element instead. {% highlight js %} $(function () { $('.example-popover').popover({ container: 'body' }) }) {% endhighlight %} ## Static popover Four options are available: top, right, bottom, and left aligned.

Popover top

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover right

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover bottom

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover left

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

## Live demo {% example html %} {% endexample %} ### Four directions
{% highlight html %} {% endhighlight %} ### Dismiss on next click Use the `focus` trigger to dismiss popovers on the next click that the user makes. {% callout danger %} #### Specific markup required for dismiss-on-next-click For proper cross-browser and cross-platform behavior, you must use the `
` tag, _not_ the `