',
html: true
}
```
Title and content can also be function references, which are called each time the popover is opened.
To make a value returned by the function reactive while open, set the title or content to a _new_
function reference whenever the content changes.
```html
Title + Content
Config Object
Config from data
Method
Config Object
```
## Variants and custom class
BootstrapVue's popovers support contextual color variants via our custom CSS, either by using
directive modifiers or config options:
```html
Danger Modifier
Info Config
```
Bootstrap default theme variants are: `danger`, `warning`, `success`, `primary`, `secondary`,
`info`, `light`, and `dark`. You can change or add additional variants via Bootstrap
[SCSS variables](/docs/reference/theming)
A custom class can be applied to the popover outer wrapper by using the customClass option
property:
```html
Button
```
## Directive syntax and usage
```html
Button
```
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 `` when visible
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`).
Use `manual` if you only want to control the visibility manually.
- `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 `50`), applied to both
`hide` and `show`.
- A show delay value in the format of `ds###` (where `###` is in ms, defaults to `50`), applied to
`show` trigger only.
- A hide delay value in the format of `dh###` (where `###` is in ms, defaults to `50`), applied to
`hide` trigger only.
- 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).
- A contextual variant in the form of `v-XXX` (where `XXX` is the color variant name).
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 below for available options.
**Options configuration object properties:**
| Property | Type | Default | Description |
| ------------------- | ----------------------------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `animation` | Boolean | `true` | Apply a CSS fade transition to the popover. |
| `container` | String ID or HTMLElement or `false` | `false` | Appends the popover to a specific element. Example: `container: '#body'`. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element - which will prevent the popover from floating away from the triggering element during a window resize. When set to `false` the popover will be appended to `body`, or if the trigger element is inside a modal it will append to the modal's container. |
| `delay` | Number or Object | `50` | Delay showing and hiding the popover (ms). If a number is supplied, delay is applied to both hide/show. Object structure is: `delay: { "show": 500, "hide": 100 }` |
| `html` | Boolean | `false` | Allow HTML in the popover. If true, HTML tags in the popover's title and content will be rendered in the tooltip. If false, the title and content will be inserted as plain text. Use text if you're worried about XSS attacks. |
| `placement` | String or Function | `'top'` | How to position the popover - `auto`, `top`, `bottom`, `left`, `right`, `topleft`, `topright`, `bottomleft`, `bottomright`, `lefttop`, `leftbottom`, `righttop`, or `rightbottom`. When `auto` is specified, it will dynamically reorient the tooltip. |
| `title` | String or Function | `''` | Default title value if title attribute isn't present. If a function is given, it must return a string. |
| `content` | String or Function | `''` | Default content value. If a function is given, it must return a string. |
| `trigger` | String | `'hover focus'` | How tooltip is triggered: `click`, `hover`, `focus`. You may pass multiple triggers; separate them with a space. Specify `'manual'` if you are only going to show and hide the tooltip programmatically. |
| `offset` | Number or String | `0` | Offset of the popover relative to its target. For more information refer to Popper.js's offset docs. |
| `fallbackPlacement` | String or Array | `'flip'` | Allow to specify which position Popper will use on fallback. Can be `flip`, `clockwise`, `counterclockwise` or an array of placements. For more information refer to Popper.js's behavior docs. |
| `boundary` | String ID or HTMLElement | `'scrollParent'` | The container that the popover will be constrained visually. The default should suffice in most cases, but you may need to change this if your target element is in a small container with overflow scroll. Supported values: `'scrollParent'` (default), `'viewport'`, `'window'`, or a reference to an HTML element. |
| `boundaryPadding` | Number | `5` | Amount of pixel used to define a minimum distance between the boundaries and the popover. This makes sure the popover always has a little padding between the edges of its container. |
| `variant` | String | `null` | Contextual color variant for the popover. |
| `customClass` | String | `null` | A custom classname to apply to the popover outer wrapper element. |
| `id` | String | `null` | An ID to use on the popover root element. If none is provided, one will automatically be generated. If you do provide an ID, it _must_ be guaranteed to be unique on the rendered page. |
| `disabled` | Boolean | `false` | Set to `true` to disable the popover |
### 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`, or the `id` of the popover (if one
was provided in the config object) as the first argument:
```js
this.$root.$emit('bv::hide::popover', 'my-trigger-button-id')
```
To open a **specific popover**, pass the trigger element's `id`, or the `id` of the popover (if one
was provided in the config object) 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 in the config object) 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 in the config object) 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)