# Popovers > Documentation and examples for adding BootstrapVue popovers to any element on your site, using > Bootstrap V4 CSS for styling and animations. Popovers can be triggered by hovering, focusing, or > clicking an element, and can contain both content and a title heading. Popovers are tooltips on > steroids. Use the `v-b-popover` directive on any **element** or **component** where you would like a popover to appear. ```html

Hover Me

``` ## Overview Things to know when using popovers: - Popovers rely on the 3rd party library Popper.js for positioning. It is bundled with BootstrapVue! - Zero-length title and content values will never show a popover. - Specify container: 'body' (default) to avoid rendering problems in more complex components (like input groups, button groups, etc). - Triggering popovers on hidden elements will not work. - Popovers for `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, ``s or ``s b to avoid this behavior. - Popovers must be hidden before their corresponding elements have been removed from the DOM. - When using a client side router, popovers will listen to changes in `$route` and automatically hide. - Elements that trigger popovers should be in the document tab sequence. Add `tabindex="0"` if required. ## Positioning Twelve options are available for positioning: `top`, `topleft`, `topright`, `right`, `righttop`, `rightbottom`, `bottom`, `bottomleft`, `bottomright`, `left`, `lefttop`, and `leftbottom` aligned. Positioning is relative to the trigger element. **Live example** ```html

``` ## Triggers Popovers can be triggered (opened/closed) via any combination of `click`, `hover` and `focus`. The default trigger is `click`. If a popover has more than one trigger, then all triggers must be cleared before the popover will close. I.e. if a popover has the trigger `focus click`, and it was opened by `focus`, and the user then clicks the trigger element, they must click it again **and** move focus to close the popover. ```html

Triggers

Click (default)

``` ### Dismiss on next click (self dismissing) Use the `focus` trigger by itself to dismiss popovers on the next click that the user makes. `focus` also makes the popover activate on both `focus` and `click` (as a click makes the element receive focus, assuming it is in the tab sequence of the page). You can, however, specify your trigger as `click blur`, which will make only a click activate the popover, and either a click on the element - _or losing focus to another element or part of the document_ - will close the popover. This `blur` trigger must be used in combination with the `click` trigger. Th following example shows the `click blur` use case. Popovers will only open on click of the button, and will close either on click of the button, or a click anywhere else (or a focus change via pressing the TAB key). Some call this behavior _self dismissing_. ```html

``` ## Heading and content There are several options for provisioning the title and content of a popover. By default, popover will use the `title` attribute of the element as the popover heading, and the content is passed as a string to the `v-b-popover` directive. The title and content can also be passed as an object to `v-b-popover` in the form of ```js const options = { title: 'This is the title', content: 'This is the content' } ``` If your content has basic HTML markup, then you will also need to set the `html` property to true, or use the directive modifier `html` ```js // Object format with HTML: const options = { title: 'This is the title', content: 'This is the content', html: true } ``` Content can also be a function reference, which is called each time the popover is opened. ```html ``` ## Directive syntax and usage ``` v-b-popover:[container].[mod].[mod].[...].[mod]="" ``` Where `` can be (optional): - A string containing the **content** of the popover - A function reference to generate the **content** of the popover (receives one argument which is a reference to the DOM element triggering the popover) - An object containing more complex configuration of popover, See Bootstrap docs for possible values/structure) Where `[mod]` can be (all optional): - Positioning: `top`, `bottom`, `left`, `right`, `auto`; or the offset alignment positions `topleft`, `topright`, `bottomleft`, `bottomright`, `lefttop`, `leftbottom`, `righttop`, or `rightbottom` (last one found wins, defaults to `right`). - Event trigger: `click`, `hover`, `focus`, `blur` (if none specified, defaults to `click`. The `blur` trigger is a close handler only, and if specified by itself, will be converted to `focus`). - `nofade` to turn off animation. - `html` to enable rendering raw HTML. by default HTML is escaped and converted to text. - A delay value in the format of `d###` (where `###` is in ms, defaults to 0). - An offset value in pixels in the format of `o###` (where `###` is the number of pixels, defaults to 0. Negative values are allowed). Note if an offset is supplied, then the alignment positions will fallback to one of `top`, `bottom`, `left`, or `right`. - A boundary setting of `window` or `viewport`. The element to constrain the visual placement of the popover. If not specified, the boundary defaults to the trigger element's scroll parent (in most cases this will suffice). Where `[container]` can be (optional): - An element ID (minus the #) to place the popover markup in when visible - If not provided, popovers are appended to the body when visible ### Usage **Simplest usage:** ``` v-b-popover="'This is a Popover!'" ``` or use the element's `title` attribute for the popover header: ``` v-b-popover title="This is a popover header" v-b-popover="'This is popover content'" title="This is popover header" ``` or provide an object for title and content: ``` v-b-popover="{title:'Popover header', content:'Popover content'}" ``` **Enable HTML content/title:** ```html v-b-popover.html="'Emphasis in content'" title="Bolded title" ``` **Placement examples:** ``` v-b-popover.top ``` **Trigger examples:** ``` v-b-popover => Default of click v-b-popover.hover => Hover only v-b-popover.click => Click only v-b-popover.hover.focus => Both hover and focus ``` **Combo:** ``` v-b-popover.hover.bottom => Show on hover and place at bottom v-b-popover.bottom.hover => Same as above v-b-popover.bottom.click.html => Show on click and place at bottom with HTML content ``` ## Hiding and showing popovers via \$root events You can close (hide) **all open popovers** by emitting the `bv::hide::popover` event on \$root: ```js this.$root.$emit('bv::hide::popover') ``` To close a **specific popover**, pass the trigger element's `id` as the first argument: ```js this.$root.$emit('bv::hide::popover', 'my-trigger-button-id') ``` To open (show) a **specific popover**, pass the trigger element's `id` as the first argument when emitting the `bv::show::popover` event: ```js this.$root.$emit('bv::show::popover', 'my-trigger-button-id') ``` To open all popovers simultaneously, omit the `id` argument when emitting the `bv::show::popover` event. These events work for both the component **and** directive versions of popover. Note the **trigger element** must exist in the DOM and be in a visible state in order for the popover to instantiate and show. ## Disabling and enabling popovers via \$root events You can disable **all** popovers by emitting the `bv::disable::popover` event on \$root: ```js this.$root.$emit('bv::disable::popover') ``` To disable a **specific popover**, pass the trigger element's `id` as the first argument: ```js this.$root.$emit('bv::disable::popover', 'my-trigger-button-id') ``` To enable a **specific popover**, pass the trigger element's `id` as the first argument when emitting the `bv::enable::popover` event: ```js this.$root.$emit('bv::enable::popover', 'my-trigger-button-id') ``` To enable all popovers simultaneously, omit the `id` argument when emitting the `bv::enable::popover` event. These events work for both the component and directive versions of popover. Note the **trigger element** must exist in the DOM in order for the popover to be enabled or disabled. ## See also - [`v-b-tooltip` directive](/docs/directives/tooltip) - [`` component](/docs/components/popover) - [`` component](/docs/components/tooltip)