--- layout: page title: Popovers --- Add small overlays of content, like those found in iOS, to any element for housing secondary information. ## Overview Things to know when using the popover plugin: - Popovers require the [tooltip plugin](/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. ## 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 {% 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 `