--- layout: docs title: Popovers group: components --- 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 `