--- layout: docs title: Popovers group: components --- [//]: # DO NOT EDIT IT WILL BE OVERWRITTEN - copy of bootstrap documentation generated by gulp docs:copy:bs-docs {% callout info %} **Bootstrap Reference Documentation** This is a part of the reference documentation from Bootstrap. It is included here to demonstrate rendering with Material Design for Bootstrap default styling. See the Material Design section for more elements and customization options. {% endcallout %} Add small overlay content, like those found in iOS, to any element for housing secondary information. ## Contents * Will be replaced with the ToC, excluding the "Contents" header {:toc} ## Overview Things to know when using the popover plugin: - Popovers rely on the 3rd party library [Tether](http://github.hubspot.com/tether/) for positioning. You must include [tether.min.js](https://github.com/HubSpot/tether/blob/master/dist/js/tether.min.js) before bootstrap.js in order for popovers to work! - Popovers require the [tooltip plugin]({{ site.baseurl }}/components/tooltips) as a dependency. - 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. 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. ## 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 `