Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(tooltip, popover): overall code refactor for better reactivity and performance (fixes: #1990, #2937, #3480, #3717, #3854, closes #3451) #3908

Merged
merged 393 commits into from Aug 28, 2019
Merged
Changes from 250 commits
Commits
Show all changes
393 commits
Select commit Hold shift + click to select a range
f3e438e
Update bv-tooltip.js
tmorehouse Aug 24, 2019
8c1e587
Merge branch 'dev' into tmorehouse/tooltip-popover-revamp
tmorehouse Aug 24, 2019
b3f6d14
Update bv-tooltip.js
tmorehouse Aug 24, 2019
ca6be59
Update bv-tooltip-template.js
tmorehouse Aug 24, 2019
4cd3bf2
Update bv-popover-template.js
tmorehouse Aug 24, 2019
ac86f1c
Update tooltip.js
tmorehouse Aug 24, 2019
d53c0b2
Update bv-tooltip.js
tmorehouse Aug 24, 2019
7b87908
Update bv-tooltip-template.js
tmorehouse Aug 24, 2019
1104c1a
Update tooltip.js
tmorehouse Aug 24, 2019
d0695a1
Update tooltip.js
tmorehouse Aug 24, 2019
435507e
Update tooltip.js
tmorehouse Aug 24, 2019
aecb36b
Update bv-popper.js
tmorehouse Aug 24, 2019
50f69b5
Update bv-tooltip.js
tmorehouse Aug 24, 2019
4fffcc1
Update tooltip.spec.js
tmorehouse Aug 24, 2019
2afaa5a
Update bv-tooltip.js
tmorehouse Aug 24, 2019
fee826a
Update tooltip.spec.js
tmorehouse Aug 24, 2019
f68d9b3
Update tooltip.spec.js
tmorehouse Aug 24, 2019
cf6a970
Update tooltip.spec.js
tmorehouse Aug 24, 2019
b763a9b
Update bv-tooltip.js
tmorehouse Aug 24, 2019
de1cb20
Update tooltip.spec.js
tmorehouse Aug 24, 2019
ec22f59
Update tooltip.spec.js
tmorehouse Aug 25, 2019
1b2c4bf
Update tooltip.spec.js
tmorehouse Aug 25, 2019
35e5954
Update tooltip.spec.js
tmorehouse Aug 25, 2019
4d717cc
Update tooltip.spec.js
tmorehouse Aug 25, 2019
565e7ab
Update tooltip.spec.js
tmorehouse Aug 25, 2019
e14b273
Update tooltip.spec.js
tmorehouse Aug 25, 2019
514bcc2
Update tooltip.spec.js
tmorehouse Aug 25, 2019
d53c51e
Update popover.js
tmorehouse Aug 25, 2019
29a34ba
Update tooltip.js
tmorehouse Aug 25, 2019
ef6a6db
Merge branch 'dev' into tmorehouse/tooltip-popover-revamp
tmorehouse Aug 25, 2019
cd0b3fa
Delete toolpop.js
tmorehouse Aug 25, 2019
f730655
Update tooltip.js
tmorehouse Aug 25, 2019
335abbf
Update popover.js
tmorehouse Aug 25, 2019
3b2b345
Update popover.spec.js
tmorehouse Aug 25, 2019
844a33d
Update bv-popover.js
tmorehouse Aug 25, 2019
bb89a71
Update popover.spec.js
tmorehouse Aug 25, 2019
d2d1765
Update popover.spec.js
tmorehouse Aug 25, 2019
2a12958
Update bv-popover.js
tmorehouse Aug 25, 2019
27dc649
Update bv-tooltip.js
tmorehouse Aug 25, 2019
6e6ffe5
Update bv-popover.js
tmorehouse Aug 25, 2019
a0210f3
Update popover.js
tmorehouse Aug 25, 2019
d2d53a2
Update _popover.scss
tmorehouse Aug 25, 2019
05c806f
Update package.json
tmorehouse Aug 25, 2019
854fd25
Update package.json
tmorehouse Aug 25, 2019
9a6d9a8
Update package.json
tmorehouse Aug 25, 2019
79b78a4
Update package.json
tmorehouse Aug 25, 2019
d062d26
Update tooltip.js
tmorehouse Aug 25, 2019
18b40af
Update tooltip.js
tmorehouse Aug 25, 2019
7e0ab3f
Update tooltip.js
tmorehouse Aug 25, 2019
ac3e989
Update tooltip.js
tmorehouse Aug 25, 2019
05aea9f
Update tooltip.spec.js
tmorehouse Aug 25, 2019
52bc87c
Update tooltip.spec.js
tmorehouse Aug 25, 2019
186aa9e
Update tooltip.spec.js
tmorehouse Aug 25, 2019
cb41b46
Update tooltip.js
tmorehouse Aug 25, 2019
2ae77fe
Update tooltip.js
tmorehouse Aug 25, 2019
9cca9bc
Update tooltip.js
tmorehouse Aug 25, 2019
e593aa3
Update tooltip.js
tmorehouse Aug 25, 2019
183047a
Update tooltip.js
tmorehouse Aug 25, 2019
1690a9e
Merge branch 'dev' into tmorehouse/tooltip-popover-revamp
tmorehouse Aug 25, 2019
6041424
Update tooltip.js
tmorehouse Aug 25, 2019
227ca63
Update popover.js
tmorehouse Aug 25, 2019
548e863
Update popover.js
tmorehouse Aug 25, 2019
58fad6d
Update popover.js
tmorehouse Aug 25, 2019
80e6422
Update tooltip.js
tmorehouse Aug 25, 2019
859ec92
Update popover.js
tmorehouse Aug 25, 2019
74202c9
Update tooltip.js
tmorehouse Aug 25, 2019
5f28490
Delete popover.class.js
tmorehouse Aug 25, 2019
e787f44
Delete tooltip.class.js
tmorehouse Aug 25, 2019
2a89638
Update popover.js
tmorehouse Aug 25, 2019
097a168
Update tooltip.js
tmorehouse Aug 25, 2019
a22744e
Update popover.js
tmorehouse Aug 25, 2019
b7bafd3
Update popover.spec.js
tmorehouse Aug 25, 2019
cb3f031
Update popover.spec.js
tmorehouse Aug 25, 2019
80f6422
Update popover.spec.js
tmorehouse Aug 25, 2019
2a5f7f0
Update popover.spec.js
tmorehouse Aug 25, 2019
425bf91
Update popover.js
tmorehouse Aug 25, 2019
b3df052
Update tooltip.js
tmorehouse Aug 25, 2019
38bc226
Update popover.spec.js
tmorehouse Aug 25, 2019
1965174
Update popover.js
tmorehouse Aug 25, 2019
9c1347d
Update popover.js
tmorehouse Aug 25, 2019
76e49f8
Update tooltip.spec.js
tmorehouse Aug 25, 2019
7eb6fe8
Update tooltip.spec.js
tmorehouse Aug 25, 2019
cc53ab7
Update tooltip.spec.js
tmorehouse Aug 25, 2019
d326cd0
Update tooltip.spec.js
tmorehouse Aug 25, 2019
ba9d438
Update popover.spec.js
tmorehouse Aug 25, 2019
48a7091
Update tooltip.js
tmorehouse Aug 25, 2019
27158b4
Update bv-popper.js
tmorehouse Aug 25, 2019
cb48fb1
Update bv-tooltip-template.js
tmorehouse Aug 25, 2019
4cd4d98
Update bv-tooltip.js
tmorehouse Aug 25, 2019
39b0897
Update bv-tooltip.js
tmorehouse Aug 25, 2019
cf8f4f4
Update bv-tooltip.js
tmorehouse Aug 25, 2019
5afcb2f
Update tooltip.spec.js
tmorehouse Aug 25, 2019
a9e307b
Update tooltip.spec.js
tmorehouse Aug 25, 2019
1a8d224
Update tooltip.spec.js
tmorehouse Aug 25, 2019
51e440f
Update tooltip.spec.js
tmorehouse Aug 25, 2019
ba87dcb
Update tooltip.spec.js
tmorehouse Aug 26, 2019
9cec8c2
Update tooltip.spec.js
tmorehouse Aug 26, 2019
3dc1572
Update bv-tooltip.js
tmorehouse Aug 26, 2019
af0f11b
Update tooltip.spec.js
tmorehouse Aug 26, 2019
606b8f7
Update tooltip.spec.js
tmorehouse Aug 26, 2019
2380563
Update tooltip.spec.js
tmorehouse Aug 26, 2019
195e1a0
Update tooltip.spec.js
tmorehouse Aug 26, 2019
bb1d955
Update tooltip.spec.js
tmorehouse Aug 26, 2019
87ab141
Update tooltip.spec.js
tmorehouse Aug 26, 2019
2a0b017
Update tooltip.js
tmorehouse Aug 26, 2019
307e341
Update tooltip.spec.js
tmorehouse Aug 26, 2019
ff23281
Update tooltip.spec.js
tmorehouse Aug 26, 2019
18d1624
Update tooltip.spec.js
tmorehouse Aug 26, 2019
ea4a03b
Update bv-tooltip.js
tmorehouse Aug 26, 2019
476d3d1
Update bv-tooltip.js
tmorehouse Aug 26, 2019
d2eea54
Update bv-tooltip.js
tmorehouse Aug 26, 2019
95341b6
Update bv-tooltip.js
tmorehouse Aug 26, 2019
8badd4c
Update bv-tooltip.js
tmorehouse Aug 26, 2019
1b3b8a5
Merge branch 'dev' into tmorehouse/tooltip-popover-revamp
tmorehouse Aug 26, 2019
7d3bce2
Update bv-tooltip.js
tmorehouse Aug 26, 2019
a5adc1f
Merge branch 'dev' into tmorehouse/tooltip-popover-revamp
tmorehouse Aug 26, 2019
0880b2f
Update bv-tooltip.js
tmorehouse Aug 26, 2019
2a6541a
Update package.json
jackmu95 Aug 26, 2019
d1c7e6a
Update bv-tooltip.js
tmorehouse Aug 26, 2019
929b4b0
Update popover.js
jackmu95 Aug 26, 2019
613ca04
Update package.json
jackmu95 Aug 26, 2019
f18115d
Update bv-tooltip.js
tmorehouse Aug 26, 2019
8097d51
Update tooltip.js
jackmu95 Aug 26, 2019
63194b7
Update popover.js
jackmu95 Aug 26, 2019
7a42c6c
Update bv-popover-template.js
jackmu95 Aug 26, 2019
290f213
Update bv-popper.js
jackmu95 Aug 26, 2019
a72a93d
Update bv-tooltip-template.js
jackmu95 Aug 26, 2019
49d010b
Update bv-tooltip.js
jackmu95 Aug 26, 2019
b31fa8d
Merge branch 'tmorehouse/tooltip-popover-revamp' of https://github.co…
jackmu95 Aug 26, 2019
8d8875d
Update bv-tooltip.js
tmorehouse Aug 26, 2019
adee104
Update bv-tooltip.js
jackmu95 Aug 26, 2019
1b80ace
Merge branch 'tmorehouse/tooltip-popover-revamp' of https://github.co…
jackmu95 Aug 26, 2019
1962578
Update README.md
tmorehouse Aug 26, 2019
24f39e3
Update README.md
tmorehouse Aug 26, 2019
2a286af
Update README.md
tmorehouse Aug 26, 2019
be3e3d9
Update README.md
tmorehouse Aug 26, 2019
234239a
Update README.md
tmorehouse Aug 26, 2019
98de6c2
Update README.md
tmorehouse Aug 26, 2019
4014ceb
Update README.md
tmorehouse Aug 26, 2019
e807ce1
Update README.md
tmorehouse Aug 26, 2019
583e8db
Update bv-tooltip.js
tmorehouse Aug 26, 2019
4daa460
Update README.md
tmorehouse Aug 26, 2019
15d60d1
Update tooltip.js
tmorehouse Aug 26, 2019
def0efe
Update tooltip.js
tmorehouse Aug 26, 2019
e6c0e2d
Update popover.js
tmorehouse Aug 26, 2019
79e5d1b
Update tooltip.js
tmorehouse Aug 26, 2019
3cff3d6
Update tooltip.js
tmorehouse Aug 26, 2019
2dcc7d0
Update popover.js
tmorehouse Aug 26, 2019
5a1e0d7
Update popover.js
tmorehouse Aug 26, 2019
bdf61e6
Update tooltip.js
tmorehouse Aug 26, 2019
8bc74a0
Update popover.js
tmorehouse Aug 26, 2019
461ab46
Update popover.js
tmorehouse Aug 26, 2019
8966f60
Update README.md
tmorehouse Aug 26, 2019
a6f4ae9
Update bv-tooltip.js
tmorehouse Aug 26, 2019
1cbb9e0
Update bv-tooltip.js
tmorehouse Aug 26, 2019
3d2fd3a
Update README.md
tmorehouse Aug 26, 2019
1b1d5a6
Update bv-tooltip.js
tmorehouse Aug 26, 2019
3c563b8
Update tooltip.js
tmorehouse Aug 26, 2019
c6a2f33
Update tooltip.js
tmorehouse Aug 26, 2019
497ce7f
Update tooltip.js
tmorehouse Aug 26, 2019
3337bc8
Update popover.js
tmorehouse Aug 26, 2019
99b4040
Update bv-tooltip-template.js
tmorehouse Aug 26, 2019
64a2805
Update bv-popover-template.js
tmorehouse Aug 26, 2019
1373654
Update bv-tooltip-template.js
tmorehouse Aug 26, 2019
803c703
Update bv-tooltip.js
tmorehouse Aug 26, 2019
601d67a
Update bv-popover-template.js
tmorehouse Aug 26, 2019
7ba4013
Update tooltip.js
tmorehouse Aug 26, 2019
23db17c
Update popover.js
tmorehouse Aug 26, 2019
da53fd8
Update tooltip.js
tmorehouse Aug 26, 2019
13d8fe0
Update README.md
tmorehouse Aug 26, 2019
59e0266
Update README.md
tmorehouse Aug 26, 2019
b578222
Update README.md
tmorehouse Aug 26, 2019
da32969
Update README.md
tmorehouse Aug 26, 2019
17b4cf4
Update README.md
tmorehouse Aug 26, 2019
c0e1dc2
Update README.md
tmorehouse Aug 26, 2019
77e1a2b
Update README.md
tmorehouse Aug 26, 2019
74086a6
Merge branch 'dev' into tmorehouse/tooltip-popover-revamp
tmorehouse Aug 27, 2019
89ca07c
Update README.md
tmorehouse Aug 27, 2019
1eb237b
Update README.md
tmorehouse Aug 27, 2019
8cdd7b5
Update README.md
tmorehouse Aug 27, 2019
1c284db
Fix typos
jackmu95 Aug 27, 2019
e2655c3
Merge branch 'dev' into tmorehouse/tooltip-popover-revamp
jackmu95 Aug 27, 2019
89009c8
Update README.md
tmorehouse Aug 27, 2019
17a4f8d
Update README.md
tmorehouse Aug 27, 2019
b15c73b
Update README.md
tmorehouse Aug 27, 2019
e1d5635
Update README.md
jackmu95 Aug 27, 2019
546fecb
Update and rename src/utils/bv-popper.js to src/utils/components/tool…
tmorehouse Aug 27, 2019
40857dc
Update and rename src/utils/bv-tooltip-template.js to src/components/…
tmorehouse Aug 27, 2019
de57f4f
Rename src/utils/components/tooltip/helpers/bv-popper.js to src/compo…
tmorehouse Aug 27, 2019
d2ef6c4
Update and rename src/utils/bv-tooltip.js to src/components/tooltip/h…
tmorehouse Aug 27, 2019
9e55c35
Update and rename src/utils/bv-popover-template.js to src/components/…
tmorehouse Aug 27, 2019
7036410
Update and rename src/utils/bv-popover.js to src/components/popover/h…
tmorehouse Aug 27, 2019
68a2557
Update tooltip.js
tmorehouse Aug 27, 2019
cc55518
Update popover.js
tmorehouse Aug 27, 2019
8212cff
Update popover.js
tmorehouse Aug 27, 2019
2d118cd
Update popover.js
tmorehouse Aug 27, 2019
af9e80e
Update tooltip.js
tmorehouse Aug 27, 2019
2bc1195
Update popover.js
tmorehouse Aug 27, 2019
eb228a7
Update popover.spec.js
tmorehouse Aug 27, 2019
6302f2a
Update tooltip.spec.js
tmorehouse Aug 27, 2019
474e922
Update README.md
tmorehouse Aug 27, 2019
d83cabb
Update README.md
tmorehouse Aug 27, 2019
1785f65
Update README.md
tmorehouse Aug 27, 2019
7b8bc11
Update README.md
tmorehouse Aug 27, 2019
382b36f
Update README.md
tmorehouse Aug 27, 2019
33a0828
Update popover.js
tmorehouse Aug 27, 2019
9969f66
Update README.md
tmorehouse Aug 27, 2019
407bd22
Update README.md
tmorehouse Aug 27, 2019
7ae6e09
Update README.md
tmorehouse Aug 27, 2019
a2e27c9
Update README.md
tmorehouse Aug 27, 2019
1384a81
Update tooltip.js
tmorehouse Aug 27, 2019
0fe05e6
Update popover.js
tmorehouse Aug 27, 2019
27acd96
Update bv-tooltip.js
tmorehouse Aug 27, 2019
3078d02
Update bv-tooltip-template.js
tmorehouse Aug 27, 2019
c1c0058
Update bv-tooltip.js
tmorehouse Aug 27, 2019
c9db460
Update bv-tooltip-template.js
tmorehouse Aug 27, 2019
7d05c92
Update README.md
tmorehouse Aug 27, 2019
89e8aa3
Update README.md
tmorehouse Aug 27, 2019
889466a
Update README.md
tmorehouse Aug 27, 2019
ecca7f1
Update README.md
tmorehouse Aug 27, 2019
cdb92ff
Update bv-tooltip.js
tmorehouse Aug 27, 2019
d662a97
Update bv-tooltip-template.js
tmorehouse Aug 27, 2019
6d72a00
Update tooltip.js
tmorehouse Aug 27, 2019
895a0e0
Update tooltip.js
tmorehouse Aug 27, 2019
90665ef
Update bv-tooltip.js
tmorehouse Aug 27, 2019
cc8d51b
Update bv-tooltip.js
tmorehouse Aug 27, 2019
cf0af15
Update tooltip.js
tmorehouse Aug 27, 2019
67c74fe
Update bv-tooltip.js
tmorehouse Aug 27, 2019
6c3b1c9
Update bv-tooltip-template.js
tmorehouse Aug 27, 2019
6e79b7f
Update bv-tooltip-template.js
tmorehouse Aug 27, 2019
2a396e3
Update tooltip.js
tmorehouse Aug 27, 2019
1523b61
Update tooltip.js
tmorehouse Aug 27, 2019
e018221
Update popover.js
tmorehouse Aug 27, 2019
7feea27
Update tooltip.js
tmorehouse Aug 27, 2019
1f4a1d2
Merge branch 'dev' into tmorehouse/tooltip-popover-revamp
tmorehouse Aug 27, 2019
ccac72e
Merge branch 'dev' into tmorehouse/tooltip-popover-revamp
tmorehouse Aug 28, 2019
34553a9
Update bv-transition.js
tmorehouse Aug 28, 2019
3a06794
Update bv-transition.js
tmorehouse Aug 28, 2019
667a3d6
Update bv-transition.js
tmorehouse Aug 28, 2019
8040640
Use BVTransition utility component for transition of Tooltip and Popo…
tmorehouse Aug 28, 2019
394f19d
Update bv-popper.js
tmorehouse Aug 28, 2019
e33f1f3
Merge branch 'dev' into tmorehouse/tooltip-popover-revamp
tmorehouse Aug 28, 2019
2dee883
Update README.md
tmorehouse Aug 28, 2019
8b8c45e
Update README.md
tmorehouse Aug 28, 2019
d83893d
Update README.md
tmorehouse Aug 28, 2019
c46067b
Update README.md
tmorehouse Aug 28, 2019
cd5bc2a
Update README.md
tmorehouse Aug 28, 2019
12135f5
Update README.md
tmorehouse Aug 28, 2019
86e4ab3
Update README.md
tmorehouse Aug 28, 2019
0cb1177
Update README.md
tmorehouse Aug 28, 2019
File filter...
Filter file types
Jump to…
Jump to file or symbol
Failed to load files and symbols.

Always

Just for now

@@ -6,7 +6,17 @@
```html
<div class="text-center my-3">
<b-button v-b-popover.hover="'I am popover content!'" title="Popover Title">Hover Me</b-button>
<b-button v-b-popover.hover.top="'I am popover directive content!'" title="Popover Title">
Hover Me
</b-button>

<b-button id="popover-target-1">
Hover Me
</b-button>
<b-popover target="popover-target-1" triggers="hover" placement="top">
<template v-slot:title>Popover Title</template>
I am popover <b>component</b> content!
</b-popover>
</div>

<!-- b-popover.vue -->
@@ -17,7 +27,6 @@
Things to know when using popover component:

- Popovers rely on the 3rd party library [Popper.js](https://popper.js.org/) for positioning.
- Popovers with zero-length title _and_ content are never displayed.
- Specify `container` as `null` (default, appends to `<body>`) to avoid rendering problems in more
complex components (like input groups, button groups, etc). You can use `container` to optionally
specify a different element to append the rendered popover to.
@@ -26,22 +35,10 @@ Things to know when using popover component:
- When triggered from hyperlinks that span multiple lines, popovers will be centered. Use
`white-space: nowrap;` on your `<a>`s, `<b-link>`s and `<router-link>`s to avoid this behavior.

The `<b-popover>` component inserts a hidden (`display: none;`) `<div>` intermediate container
element at the point in the DOM where the `<b-popover>` component is placed. This may affect layout
and/or styling of components such as `<b-button-group>`, `<b-button-toolbar>`, and
`<b-input-group>`. To avoid these possible layout issues, place the `<b-popover>` component
**outside** of these types of components.

The target element **must** exist in the document before `<b-popover>` is mounted. If the target
element is not found during mount, the popover will never open. Always place your `<b-popover>`
component lower in the DOM than your target element.

**Note:** _When using slots for content and/or title, `<b-popover>` transfers the rendered DOM from
those slots into the popover's markup when shown, and returns them back to the `<b-popover>`
component when hidden. This may cause some issues in rare circumstances, so please test your
implementation accordingly! The `title` and `content` props do not have this behavior. For simple
popovers, we recommend using the `v-b-popover` directive and enable the `html` modifier if needed._

## Positioning

Twelve options are available for positioning: `top`, `topleft`, `topright`, `right`, `righttop`,
@@ -155,7 +152,8 @@ Positioning is relative to the trigger element.
## Triggers

Popovers can be triggered (opened/closed) via any combination of `click`, `hover` and `focus`. The
default trigger is `click`.
default trigger is `click`. Or a trigger of `manual` can be specified, where the popover can only be
opened or closed [programmatically](#programmatically-disabling-popover).

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
@@ -265,7 +263,8 @@ The special `blur` trigger **must** be used in combination with the `click` trig
| `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. |
| `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 |
| `variant` | `null` | Contextual color variant for the popover | Any contextual theme color variant name |
| `customClass` | `null` | A custom classname to apply to the popover outer wrapper element | A string |
| `custom-class` | `null` | A custom classname to apply to the popover outer wrapper element | A string |
| `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 |

### Variants and custom class

@@ -300,8 +299,7 @@ A custom class can be applied to the popover outer wrapper `<div>` by using the
</div>
```

**Note:** Custom classes will not work with scoped styles, as the popovers are appended to the
document `<body>` element by default.
`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.
@@ -582,7 +580,7 @@ Just need quick popovers without too much markup? Use the
</b-col>

<b-col md="3" class="py-3">
<b-button v-b-popover.hover.bottom="'ToolTip!'" variant="primary">Bottom</b-button>
<b-button v-b-popover.hover.bottom="'Tooltip!'" variant="primary">Bottom</b-button>
</b-col>
</b-row>
</b-container>
@@ -596,9 +594,8 @@ information on the directive usage.

## Advanced `<b-popover>` usage with reactive content

You can even make your `<b-popover>` content interactive. Just remember not to use the `focus`,
`hover` or `blur` triggers (use only `click`), otherwise your popover will close automatically as
soon as someone will try to interact with the content.
You can even make your `<b-popover>` 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:
@@ -617,7 +614,7 @@ to deal with on mobile devices (such as smart-phones).
<div id="my-container">
<div class="my-3">
<!-- Our triggering (target) element -->
<b-button id="popover-reactive-1" :disabled="popoverShow" variant="primary" ref="button">
<b-button id="popover-reactive-1" variant="primary" ref="button">
Reactive Content Using Slots
</b-button>
</div>
@@ -798,14 +795,16 @@ You can close (hide) **all open popovers** by emitting the `bv::hide::popover` e
this.$root.$emit('bv::hide::popover')
```

To close a **specific popover**, pass the trigger element's `id` as the first argument:
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` as the first argument when
emitting the `bv::show::popover` event:
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')
@@ -827,14 +826,16 @@ You can disable **all** popovers by emitting the `bv::disable::popover` event on
this.$root.$emit('bv::disable::popover')
```

To disable a **specific popover**, pass the trigger element's `id` as the first argument:
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` as the first argument when
emitting the `bv::enable::popover` event:
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')
@@ -1,3 +1,17 @@
// Some overrides to make popover transitions work with Vue `<transition>`
.popover.b-popover {
display: block;
opacity: 1;

&.fade:not(.show) {
opacity: 0;
}

&.show {
opacity: 1;
}
}

@if $bv-enable-popover-variants {
@each $variant, $value in $theme-colors {
.b-popover-#{$variant} {
@@ -0,0 +1,48 @@
import Vue from '../../../utils/vue'
import { isFunction, isUndefinedOrNull } from '../../../utils/inspect'

import { BVTooltipTemplate } from '../../tooltip/helpers/bv-tooltip-template'

const NAME = 'BVPopoverTemplate'

// @vue/component
export const BVPopoverTemplate = /*#__PURE__*/ Vue.extend({
name: NAME,
extends: BVTooltipTemplate,
computed: {
templateType() {
return 'popover'
}
},
methods: {
renderTemplate(h) {
// Title and content could be a scoped slot function
const $title = isFunction(this.title) ? this.title({}) : this.title
const $content = isFunction(this.content) ? this.content({}) : this.content

// Directive usage only
const titleDomProps = this.html && !isFunction(this.title) ? { innerHTML: this.title } : {}
const contentDomProps =
this.html && !isFunction(this.content) ? { innerHTML: this.content } : {}

return h(
'div',
{
staticClass: 'popover b-popover',
class: this.templateClasses,
attrs: this.templateAttributes,
on: this.templateListeners
},
[
h('div', { ref: 'arrow', staticClass: 'arrow' }),
isUndefinedOrNull($title)
? h()
: h('h3', { staticClass: 'popover-header', domProps: titleDomProps }, [$title]),
isUndefinedOrNull($content)
? h()
: h('div', { staticClass: 'popover-body', domProps: contentDomProps }, [$content])
]
)
}
}
})
@@ -0,0 +1,29 @@
// Popover "Class" (Built as a renderless Vue instance)
// Inherits from BVTooltip
//
// Handles trigger events, etc.
// Instantiates template on demand

import Vue from '../../../utils/vue'
import { BVTooltip } from '../../tooltip/helpers/bv-tooltip'
import { BVPopoverTemplate } from './bv-popover-template'

const NAME = 'BVPopover'

// @vue/component
export const BVPopover = /*#__PURE__*/ Vue.extend({
name: NAME,
extends: BVTooltip,
computed: {
// Overwrites BVTooltip
templateType() {
return 'popover'
}
},
methods: {
getTemplate() {
// Overwrites BVTooltip
return BVPopoverTemplate
}
}
})
@@ -165,7 +165,11 @@
"slots": [
{
"name": "title",
"description": "Optional slot for title (html supported)"
"description": "Optional slot for title (HTML supported)"
},
{
"name": "default",
"description": "Slot for content (HTML supported)"
}
]
}
ProTip! Use n and p to navigate between commits in a pull request.
You can’t perform that action at this time.