` by using the `custom-class` prop: ```html

Button

Popover content

``` `variant` and `custom-class` are reactive and can be changed while the popover is open. Refer to the [popover directive](/docs/directives/popover) docs on applying variants and custom class to the directive version. ### Programmatically show and hide popover You can manually control the visibility of a popover via the syncable Boolean `show` prop. Setting it to `true` will show the popover, while setting it to `false` will hide the popover. ```html ``` Programmatic control can also be affected by submitting `'open'` and `'close'` events to the popover by reference. ```html ``` To make the popover shown on initial render, simply add the `show` prop on ``: ```html

I start open

``` A popover which is opened programmatically via the 'show' property or by an event call can only be closed programmatically. Built-in triggers will work inadequately, because trigger event will try to open the popover even though it is already opened. In the below example, when the first Popover is opened with the 'open' event, it will take two button clicks to close it. Play with the below demo to understand this. When you desire graceful handling of both programmatic control of the Popover component as well as user interaction triggers, you should disable built-in triggers and handle control yourself as demonstrated by the second Popover. ```html ``` You can also use `$root` events to trigger the showing and hiding of popover(s). See the **Hiding and showing popovers via \$root events** section below for details. ### Programmatically disabling popover You can disable popover via the syncable Boolean prop `disabled` (default value is `false`) Setting it to `true` will disable the popover. If the popover is currently visible when disabled is set to `false`, it will remain visible until it is enabled or programmatically closed. If the popover is disabled/enabled via \$root events (see below), your `disabled` value will be updated as long as you have provided the `.sync` prop modifier. ```html ``` Programmatic control can also be affected by submitting `'enable'` and `'disable'` events to the popover by reference. ```html ``` When disabled, the popover can be opened programmatically (either via the `show` prop, methods or events). You can also use `$root` events to trigger disabling and enabling of popover(s). See the **Disabling and enabling popovers via \$root events** section below for details. ## `v-b-popover` Directive usage Just need quick popovers without too much markup? Use the [`v-b-popover` directive](/docs/directives/popover): ```html

Top

Right

Left

Bottom

``` Refer to the [`v-b-popover` directive](/docs/directives/popover) documentation for detailed information on the directive usage. ## Advanced `` usage with reactive content You can even make your `` content interactive. Just remember not to use the `focus` or triggers (use only `click`). If you absolutely must use a trigger other than `click` (or want to disable closing of the popover when the trigger element is clicked a second time), then you can either: - Listen for the `hide` event on the `` element, and call the `preventDefault()` method (when appropriate) on the `BvEvent` object passed to your `hide` handler; - Disable your trigger element (if possible) as soon as the popover begins to open (via the `show` event), and re-enable it when appropriate (i.e. via the `hide` or `hidden` event). For practical purposes, **interactive content popovers should be minimal**. The maximum width of the popover is hard coded by Bootstrap v4 CSS to `276px`. Tall popovers on small screens can be harder to deal with on mobile devices (such as smart-phones). ```html ``` ## 'Global' \$root instance events Using `$root` instance it is possible to emit and listen events somewhere out of a component, where `` is used. In short, `$root` behaves like a global event emitters and listener. Details about `$root` instance can be found in [the official Vue docs](https://vuejs.org/v2/guide/components-edge-cases.html#Accessing-the-Root-Instance). ### 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`, or the `id` of the popover (if one was provided via the `id` prop), 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`, or the `id` of the popover (if one was provided via the `id` prop), 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`, or the `id` of the popover (if one was provided via the `id` prop), 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`, or the `id` of the popover (if one was provided via the `id` prop), 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._ ### Listening to popover changes via \$root events To listen to any popover opening, use: ```js export default { mounted() { this.$root.$on('bv::popover::show', bvEventObj => { console.log('bvEventObj:', bvEventObj) }) } } ``` Refer to the [Events](/docs/components/popover#component-reference) section of documentation for the full list of events. ## Accessibility Popovers, in their current implementation, are not overly accessible when used as interactive components. Content may not be actively read to screen reader users, and the popover markup might not be located close to the trigger element in the DOM (as popovers usually get appended to the end of ``). When using popovers as interactive component, you should transfer focus into the popover if possible. When the popover is closed, you should return focus back to your triggering element (assuming `focus` is not used as a trigger method), as we have done in the above example. You may also want to implement focus containment in the popover content while the user is interacting with it (keeping focus inside the popover until it is closed by the user). **Note:** The animation effect of this component is dependent on the `prefers-reduced-motion` media query. See the [reduced motion section of our accessibility documentation](/docs/reference/accessibility) for additional details. ### Making popovers work for keyboard and assistive technology users To allow keyboard users to activate your popovers, you should only add them to HTML elements that are traditionally keyboard-focusable and interactive (such as links or form controls). Although arbitrary HTML elements (such as ``s) can be made focusable by adding the `tabindex="0"` attribute, this will add potentially annoying and confusing tab stops on non-interactive elements for keyboard users, and most assistive technologies currently do not announce the popover's content in this situation. Additionally, do not rely solely on `hover` as the trigger for your popovers, as this will make them impossible to trigger for keyboard users. While you can insert rich, structured HTML and/or components in popovers via slots, we strongly recommend that you avoid adding an excessive amount of content. The way popovers currently work is that, once displayed, their content is tied to the trigger element with the `aria-describedby` attribute. As a result, the entirety of the popover's content will be announced (read) to assistive technology users as one long, uninterrupted stream. Additionally, while it is possible to also include interactive controls (such as form elements or links) in your popover, be aware that currently the popover does not manage keyboard focus order. When a keyboard user opens a popover, focus remains on the triggering element, and as the popover usually does not immediately follow the trigger in the document's structure, there is no guarantee that moving forward/pressing Tab will move a keyboard user into the popover itself. In short, simply adding interactive controls to a popover is likely to make these controls unreachable/unusable for keyboard users and users of assistive technologies, or at the very least make for an illogical overall focus order. **In these cases, consider using a `` dialog instead**.

Placement

Content via properties or slots

Popover top

Popover topleft

Popover topright

Popover right

Popover righttop

Popover rightbottom

Popover bottom

Popover bottomleft

Popover bottomright

Popover left

Popover lefttop

Popover leftbottom