6 6 7 7
```html
8 8
<div class="text-center my-3">
9 -
<b-button v-b-popover.hover="'I am popover content!'" title="Popover Title">Hover Me</b-button>
9 +
<b-button v-b-popover.hover.top="'I am popover directive content!'" title="Popover Title">
10 +
Hover Me
11 +
</b-button>
12 + 13 +
<b-button id="popover-target-1">
14 +
Hover Me
15 +
</b-button>
16 +
<b-popover target="popover-target-1" triggers="hover" placement="top">
17 +
<template v-slot:title>Popover Title</template>
18 +
I am popover <b>component</b> content!
19 +
</b-popover>
10 20
</div>
11 21 12 22
<!-- b-popover.vue -->
17 27
Things to know when using popover component:
18 28 19 29
- Popovers rely on the 3rd party library [Popper.js](https://popper.js.org/) for positioning.
20 -
- Popovers with zero-length title _and_ content are never displayed.
21 30
- Specify `container` as `null` (default, appends to `<body>`) to avoid rendering problems in more
22 31
complex components (like input groups, button groups, etc). You can use `container` to optionally
23 32
specify a different element to append the rendered popover to.
@@ -26,22 +35,10 @@ Things to know when using popover component:
26 35
- When triggered from hyperlinks that span multiple lines, popovers will be centered. Use
27 36
`white-space: nowrap;` on your `<a>`s, `<b-link>`s and `<router-link>`s to avoid this behavior.
28 37 29 -
The `<b-popover>` component inserts a hidden (`display: none;`) `<div>` intermediate container
30 -
element at the point in the DOM where the `<b-popover>` component is placed. This may affect layout
31 -
and/or styling of components such as `<b-button-group>`, `<b-button-toolbar>`, and
32 -
`<b-input-group>`. To avoid these possible layout issues, place the `<b-popover>` component
33 -
**outside** of these types of components.
34 - 35 38
The target element **must** exist in the document before `<b-popover>` is mounted. If the target
36 39
element is not found during mount, the popover will never open. Always place your `<b-popover>`
37 40
component lower in the DOM than your target element.
38 41 39 -
**Note:** _When using slots for content and/or title, `<b-popover>` transfers the rendered DOM from
40 -
those slots into the popover's markup when shown, and returns them back to the `<b-popover>`
41 -
component when hidden. This may cause some issues in rare circumstances, so please test your
42 -
implementation accordingly! The `title` and `content` props do not have this behavior. For simple
43 -
popovers, we recommend using the `v-b-popover` directive and enable the `html` modifier if needed._
44 - 45 42
## Positioning
46 43 47 44
Twelve options are available for positioning: `top`, `topleft`, `topright`, `right`, `righttop`,
@@ -155,7 +152,8 @@ Positioning is relative to the trigger element.
155 152
## Triggers
156 153 157 154
Popovers can be triggered (opened/closed) via any combination of `click`, `hover` and `focus`. The
158 -
default trigger is `click`.
155 +
default trigger is `click`. Or a trigger of `manual` can be specified, where the popover can only be
156 +
opened or closed [programmatically](#programmatically-disabling-popover).
159 157 160 158
If a popover has more than one trigger, then all triggers must be cleared before the popover will
161 159
close. I.e. if a popover has the trigger `focus click`, and it was opened by `focus`, and the user
@@ -259,13 +257,14 @@ The special `blur` trigger **must** be used in combination with the `click` trig
259 257
| `disabled` | `false` | Programmatic control of the Popover display state. Recommended to use with [sync modifier](https://vuejs.org/v2/guide/components.html#sync-Modifier). | `true`, `false` |
260 258
| `triggers` | `'click'` | Space separated list of event(s), which will trigger open/close of popover using built-in handling | `hover`, `focus`, `click`. Note `blur` is a special use case to close popover on next click. |
261 259
| `no-fade` | `false` | Disable fade animation when set to `true` | `true` or `false` |
262 -
| `delay` | `0` | Delay showing and hiding of popover by specified number of milliseconds. Can also be defined as an object in the form of `{ show: 100, hide: 400 }` allowing different show and hide delays | `0` and up, integers only. |
260 +
| `delay` | `50` | Delay showing and hiding of popover by specified number of milliseconds. Can also be defined as an object in the form of `{ show: 100, hide: 400 }` allowing different show and hide delays | `0` and up, integers only. |
263 261
| `offset` | `0` | Shift the center of the popover by specified number of pixels. Also affects the position of the popover arrow. | Any negative or positive integer |
264 262
| `container` | `null` | Element string ID to append rendered popover into. If `null` or element not found, popover is appended to `<body>` (default) | Any valid in-document unique element ID. |
265 263
| `boundary` | `'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 | `'scrollParent'` (default), `'viewport'`, `'window'`, or a reference to an HTML element. |
266 264
| `boundary-padding` | `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. | Any positive number |
267 265
| `variant` | `null` | Contextual color variant for the popover | Any contextual theme color variant name |
268 -
| `customClass` | `null` | A custom classname to apply to the popover outer wrapper element | A string |
266 +
| `custom-class` | `null` | A custom classname to apply to the popover outer wrapper element | A string |
267 +
| `id` | `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. | A valid unique element ID string |
269 268 270 269
### Variants and custom class
271 270
@@ -300,8 +299,7 @@ A custom class can be applied to the popover outer wrapper `<div>` by using the
300 299
</div>
301 300
```
302 301 303 -
**Note:** Custom classes will not work with scoped styles, as the popovers are appended to the
304 -
document `<body>` element by default.
302 +
`variant` and `custom-class` are reactive and can be changed while the popover is open.
305 303 306 304
Refer to the [popover directive](/docs/directives/popover) docs on applying variants and custom
307 305
class to the directive version.
@@ -582,7 +580,7 @@ Just need quick popovers without too much markup? Use the
582 580
</b-col>
583 581 584 582
<b-col md="3" class="py-3">
585 -
<b-button v-b-popover.hover.bottom="'ToolTip!'" variant="primary">Bottom</b-button>
583 +
<b-button v-b-popover.hover.bottom="'Tooltip!'" variant="primary">Bottom</b-button>
586 584
</b-col>
587 585
</b-row>
588 586
</b-container>
@@ -596,9 +594,8 @@ information on the directive usage.
596 594 597 595
## Advanced `<b-popover>` usage with reactive content
598 596 599 -
You can even make your `<b-popover>` content interactive. Just remember not to use the `focus`,
600 -
`hover` or `blur` triggers (use only `click`), otherwise your popover will close automatically as
601 -
soon as someone will try to interact with the content.
597 +
You can even make your `<b-popover>` content interactive. Just remember not to use the `focus` or
598 +
triggers (use only `click`).
602 599 603 600
If you absolutely must use a trigger other than `click` (or want to disable closing of the popover
604 601
when the trigger element is clicked a second time), then you can either:
@@ -617,7 +614,7 @@ to deal with on mobile devices (such as smart-phones).
617 614
<div id="my-container">
618 615
<div class="my-3">
619 616
<!-- Our triggering (target) element -->
620 -
<b-button id="popover-reactive-1" :disabled="popoverShow" variant="primary" ref="button">
617 +
<b-button id="popover-reactive-1" variant="primary" ref="button">
621 618
Reactive Content Using Slots
622 619
</b-button>
623 620
</div>
@@ -798,14 +795,16 @@ You can close (hide) **all open popovers** by emitting the `bv::hide::popover` e
798 795
this.$root.$emit('bv::hide::popover')
799 796
```
800 797 801 -
To close a **specific popover**, pass the trigger element's `id` as the first argument:
798 +
To close a **specific popover**, pass the trigger element's `id`, or the `id` of the popover (if one
799 +
was provided via the `id` prop), as the first argument:
802 800 803 801
```js
804 802
this.$root.$emit('bv::hide::popover', 'my-trigger-button-id')
805 803
```
806 804 807 -
To open (show) a **specific popover**, pass the trigger element's `id` as the first argument when
808 -
emitting the `bv::show::popover` event:
805 +
To open (show) a **specific popover**, pass the trigger element's `id`, or the `id` of the popover
806 +
(if one was provided via the `id` prop), as the first argument when emitting the `bv::show::popover`
807 +
event:
809 808 810 809
```js
811 810
this.$root.$emit('bv::show::popover', 'my-trigger-button-id')
@@ -827,14 +826,16 @@ You can disable **all** popovers by emitting the `bv::disable::popover` event on
827 826
this.$root.$emit('bv::disable::popover')
828 827
```
829 828 830 -
To disable a **specific popover**, pass the trigger element's `id` as the first argument:
829 +
To disable a **specific popover**, pass the trigger element's `id`, or the `id` of the popover (if
830 +
one was provided via the `id` prop), as the first argument:
831 831 832 832
```js
833 833
this.$root.$emit('bv::disable::popover', 'my-trigger-button-id')
834 834
```
835 835 836 -
To enable a **specific popover**, pass the trigger element's `id` as the first argument when
837 -
emitting the `bv::enable::popover` event:
836 +
To enable a **specific popover**, pass the trigger element's `id`, or the `id` of the popover (if
837 +
one was provided via the `id` prop), as the first argument when emitting the `bv::enable::popover`
838 +
event:
838 839 839 840
```js
840 841
this.$root.$emit('bv::enable::popover', 'my-trigger-button-id')
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4