Skip to content

Commit 695edae

Browse files
tmorehousetmorehouse
authored
feat(tooltip, popover): add support for contextual variants and custom class (closes #1983, #2075) (#3644)
1 parent 0d0f22b commit 695edae

24 files changed

+605
-49
lines changed

‎src/_variables.scss

+10
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,16 @@ $b-toaster-offset-bottom: $b-toaster-offset-top !default;
1717
$b-toaster-offset-left: $b-toaster-offset-top !default;
1818
$b-toaster-offset-right: $b-toaster-offset-top !default;
1919

20+
// --- Toast variant levels wrt theme color value ---
2021
$b-toast-bg-level: $alert-bg-level !default;
2122
$b-toast-border-level: $alert-border-level !default;
2223
$b-toast-color-level: $alert-color-level !default;
24+
25+
// --- Tooltip variants ---
26+
$bv-enable-tooltip-variants: true !default;
27+
28+
// --- Popover variant levels wrt theme color value ---
29+
$bv-enable-popover-variants: true !default;
30+
$bv-popover-bg-level: $alert-bg-level !default;
31+
$bv-popover-border-level: $alert-border-level !default;
32+
$bv-popover-color-level: $alert-color-level !default;

‎src/components/index.scss

+2
Original file line numberDiff line numberDiff line change
@@ -9,5 +9,7 @@
99
@import "navbar/index";
1010
@import "pagination/index";
1111
@import "pagination-nav/index";
12+
@import "popover/index";
1213
@import "table/index";
1314
@import "toast/index";
15+
@import "tooltip/index";

‎src/components/popover/README.md

+45-4
Original file line numberDiff line numberDiff line change
@@ -16,17 +16,15 @@
1616

1717
Things to know when using popover component:
1818

19-
- Popovers rely on the 3rd party library Popper.js for positioning. The library is bundled with
20-
BootstrapVue dist files!
19+
- Popovers rely on the 3rd party library [Popper.js](https://popper.js.org/) for positioning.
2120
- Popovers with zero-length title _and_ content are never displayed.
2221
- Specify `container` as `null` (default, appends to `<body>`) to avoid rendering problems in more
2322
complex components (like input groups, button groups, etc). You can use `container` to optionally
24-
specify a different element to append the popover to.
23+
specify a different element to append the rendered popover to.
2524
- Triggering popovers on hidden elements will not work.
2625
- Popovers for `disabled` elements must be triggered on a wrapper element.
2726
- When triggered from hyperlinks that span multiple lines, popovers will be centered. Use
2827
`white-space: nowrap;` on your `<a>`s, `<b-link>`s and `<router-link>`s to avoid this behavior.
29-
- Popovers must be hidden before their corresponding markup elements have been removed from the DOM.
3028

3129
The `<b-popover>` component inserts a hidden (`display: none;`) `<div>` intermediate container
3230
element at the point in the DOM where the `<b-popover>` component is placed. This may affect layout
@@ -266,6 +264,49 @@ The special `blur` trigger **must** be used in combination with the `click` trig
266264
| `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. |
267265
| `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. |
268266
| `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+
| `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 |
269+
270+
### Variants and custom class
271+
272+
<span class="badge badge-info small">NEW in 2.0.0-rc.26</span>
273+
274+
BootstrapVue's popovers support contextual color variants via our custom CSS, via the `variant`
275+
prop:
276+
277+
```html
278+
<div class="text-center">
279+
<b-button id="popover-button-variant">Button</b-button>
280+
<b-popover target="popover-button-variant" variant="danger" triggers="focus">
281+
<template slot="title">Danger!</template>
282+
Danger variant popover
283+
</b-popover>
284+
</div>
285+
286+
<!-- b-popover-variant.vue -->
287+
```
288+
289+
Bootstrap default theme variants are: `danger`, `warning`, `success`, `primary`, `secondary`,
290+
`info`, `light`, and `dark`. You can change or add additional variants via Bootstrap
291+
[SCSS variables](/docs/reference/theming)
292+
293+
A custom class can be applied to the popover outer wrapper `<div>` by using the `custom-class` prop:
294+
295+
```html
296+
<div class="text-center">
297+
<b-button id="my-button">Button</b-button>
298+
<b-popover target="my-button" custom-class="my-popover-class">
299+
<template slot="title">Popover Title</template>
300+
Popover content
301+
</b-popover>
302+
</div>
303+
```
304+
305+
**Note:** Custom classes will not work with scoped styles, as the popovers are appended to the
306+
document `<body>` element by default.
307+
308+
Refer to the [popover directive](/docs/directives/popover) docs on applying variants and custom
309+
class to the directive version.
269310

270311
### Programmatically show and hide popover
271312

‎src/components/popover/_popover.scss

+97
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
@if $bv-enable-popover-variants {
2+
@each $color, $value in $theme-colors {
3+
.b-popover-#{$color} {
4+
$po-bg-color: theme-color-level($color, $bv-popover-bg-level);
5+
$po-border-color: theme-color-level($color, $bv-popover-border-level);
6+
$po-color: theme-color-level($color, $bv-popover-color-level);
7+
$po-header-bg: darken($po-bg-color, 3%);
8+
$po-header-color: color-yiq($po-header-bg);
9+
$po-arrow-color: $po-bg-color;
10+
$po-arrow-color-bottom: $po-header-bg;
11+
$po-arrow-outer-color: fade-in($po-border-color, .05);
12+
13+
&.popover {
14+
background-color: $po-bg-color;
15+
border-color: $po-border-color;
16+
}
17+
18+
&.bs-popover-top {
19+
> .arrow {
20+
&::before {
21+
border-top-color: $po-arrow-outer-color;
22+
}
23+
24+
&::after {
25+
border-top-color: $po-arrow-color;
26+
}
27+
}
28+
}
29+
30+
&.bs-popover-right {
31+
> .arrow {
32+
&::before {
33+
border-right-color: $po-arrow-outer-color;
34+
}
35+
36+
&::after {
37+
border-right-color: $po-arrow-color;
38+
}
39+
}
40+
}
41+
42+
&.bs-popover-bottom {
43+
> .arrow {
44+
&::before {
45+
border-bottom-color: $po-arrow-outer-color;
46+
}
47+
48+
&::after {
49+
// Use the header bg color
50+
border-bottom-color: $po-arrow-color-bottom;
51+
}
52+
}
53+
54+
.popover-header::before {
55+
border-bottom-color: $po-header-bg;
56+
}
57+
}
58+
59+
&.bs-popover-left {
60+
> .arrow {
61+
&::before {
62+
border-left-color: $po-arrow-outer-color;
63+
}
64+
65+
&::after {
66+
border-left-color: $po-arrow-color;
67+
}
68+
}
69+
}
70+
71+
&.bs-popover-auto {
72+
&[x-placement^="top"] {
73+
@extend .bs-popover-top;
74+
}
75+
&[x-placement^="right"] {
76+
@extend .bs-popover-right;
77+
}
78+
&[x-placement^="bottom"] {
79+
@extend .bs-popover-bottom;
80+
}
81+
&[x-placement^="left"] {
82+
@extend .bs-popover-left;
83+
}
84+
}
85+
86+
.popover-header {
87+
color: $po-header-color;
88+
background-color: $po-header-bg;
89+
border-bottom-color: darken($po-header-bg, 5%);
90+
}
91+
92+
.popover-body {
93+
color: $po-color;
94+
}
95+
}
96+
}
97+
}

‎src/components/popover/index.scss

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@import "popover";

‎src/components/popover/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
"meta": {
55
"title": "Popover",
66
"description": "The Popover feature provides a tooltip-like behavior, can be easily applied to any interactive element via the <b-popover> component or v-b-popover directive",
7+
"enhanced": true,
78
"directives": [
89
"VBPopover"
910
],

‎src/components/popover/popover.js

+8
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,14 @@ export const props = {
3333
return isArray(value) || arrayIncludes(['flip', 'clockwise', 'counterclockwise'], value)
3434
}
3535
},
36+
variant: {
37+
type: String,
38+
default: () => getComponentConfig(NAME, 'variant')
39+
},
40+
customClass: {
41+
type: String,
42+
default: () => getComponentConfig(NAME, 'customClass')
43+
},
3644
delay: {
3745
type: [Number, Object, String],
3846
default: () => getComponentConfig(NAME, 'delay')

‎src/components/popover/popover.spec.js

+15-3
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,17 @@ const localVue = new CreateLocalVue()
66

77
// Our test application definition
88
const appDef = {
9-
props: ['triggers', 'show', 'disabled', 'noFade', 'title', 'titleAttr', 'btnDisabled'],
9+
props: [
10+
'triggers',
11+
'show',
12+
'disabled',
13+
'noFade',
14+
'title',
15+
'titleAttr',
16+
'btnDisabled',
17+
'variant',
18+
'customClass'
19+
],
1020
render(h) {
1121
return h('article', { attrs: { id: 'wrapper' } }, [
1222
h(
@@ -30,7 +40,9 @@ const appDef = {
3040
triggers: this.triggers,
3141
show: this.show,
3242
disabled: this.disabled,
33-
noFade: this.noFade || false
43+
noFade: this.noFade || false,
44+
variant: this.variant,
45+
customClass: this.customClass
3446
}
3547
},
3648
[h('template', { slot: 'title' }, this.$slots.title), this.$slots.default || '']
@@ -45,7 +57,7 @@ const appDef = {
4557

4658
// Note: `wrapper.destroy()` MUST be called at the end of each test in order for
4759
// the next test to function properly!
48-
describe('tooltip', () => {
60+
describe('b-popover', () => {
4961
const originalCreateRange = document.createRange
5062
const origGetBCR = Element.prototype.getBoundingClientRect
5163

‎src/components/tooltip/README.md

+38-3
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,7 @@
1515

1616
Things to know when using tooltip component:
1717

18-
- Tooltips rely on the 3rd party library Popper.js for positioning. The library is bundled with
19-
BootstrapVue in the dist files!
18+
- Tooltips rely on the 3rd party library [Popper.js](https://popper.js.org/) for positioning.
2019
- Tooltips with zero-length titles are never displayed.
2120
- Triggering tooltips on hidden elements will not work.
2221
- Specify `container` as `null` (default, appends to `<body>`) to avoid rendering problems in more
@@ -25,7 +24,6 @@ Things to know when using tooltip component:
2524
- Tooltips for `disabled` elements must be triggered on a wrapper element.
2625
- When triggered from hyperlinks that span multiple lines, tooltips will be centered. Use
2726
white-space: nowrap; on your `<a>`s, `<b-link>`s and `<router-link>`s to avoid this behavior.
28-
- Tooltips must be hidden before their corresponding elements have been removed from the DOM.
2927

3028
The `<b-tooltip>` component inserts a hidden (`display:none`) `<div>` intermediate container element
3129
at the point in the DOM where the `<b-tooltip>` component is placed. This may affect layout and/or
@@ -156,6 +154,43 @@ then clicks the trigger element, they must click it again **and** move focus to
156154
| `container` | `null` | Element string ID to append rendered tooltip into. If `null` or element not found, tooltip is appended to `<body>` (default) | Any valid in-document unique element ID. |
157155
| `boundary` | `'scrollParent'` | The container that the tooltip 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. |
158156
| `boundary-padding` | `5` | Amount of pixel used to define a minimum distance between the boundaries and the tooltip. This makes sure the tooltip always has a little padding between the edges of its container. | Any positive number |
157+
| `variant` | `null` | Contextual color variant for the tooltip | Any contextual theme color variant name |
158+
| `customClass` | `null` | A custom classname to apply to the tooltip outer wrapper element | A string |
159+
160+
### Variants and custom class
161+
162+
<span class="badge badge-info small">NEW in 2.0.0-rc.26</span>
163+
164+
BootstrapVue's tooltips support contextual color variants via our custom CSS, via the `variant`
165+
prop:
166+
167+
```html
168+
<div class="text-center">
169+
<b-button id="tooltip-button-variant">Button</b-button>
170+
<b-tooltip target="tooltip-button-variant" variant="danger">Danger variant tooltip</b-tooltip>
171+
</div>
172+
173+
<!-- b-tooltip-variant.vue -->
174+
```
175+
176+
Bootstrap default theme variants are: `danger`, `warning`, `success`, `primary`, `secondary`,
177+
`info`, `light`, and `dark`. You can change or add additional variants via Bootstrap
178+
[SCSS variables](/docs/reference/theming)
179+
180+
A custom class can be applied to the tooltip outer wrapper `<div>` by using the `custom-class` prop:
181+
182+
```html
183+
<div class="text-center">
184+
<b-button id="my-button">Button</b-button>
185+
<b-tooltip target="my-button" custom-class="my-tooltip-class">Tooltip Title</b-tooltip>
186+
</div>
187+
```
188+
189+
**Note:** Custom classes will not work with scoped styles, as the tooltips are appended to the
190+
document `<body>` element by default.
191+
192+
Refer to the [tooltip directive](/docs/directives/tooltip) docs on applying variants and custom
193+
class to the directive version.
159194

160195
### Programmatically show and hide tooltip
161196

‎src/components/tooltip/_tooltip.scss

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
// Create custom variants for tooltips
2+
@if $bv-enable-tooltip-variants {
3+
@each $color, $value in $theme-colors {
4+
.tooltip.b-tooltip-#{$color} {
5+
$tip-text-color: color-yiq($value);
6+
7+
&.bs-tooltip-top {
8+
.arrow::before {
9+
border-top-color: $value;
10+
}
11+
}
12+
13+
&.bs-tooltip-right {
14+
.arrow::before {
15+
border-right-color: $value;
16+
}
17+
}
18+
19+
&.bs-tooltip-bottom {
20+
.arrow::before {
21+
border-bottom-color: $value;
22+
}
23+
}
24+
25+
&.bs-tooltip-left {
26+
.arrow::before {
27+
border-left-color: $value;
28+
}
29+
}
30+
31+
&.bs-tooltip-auto {
32+
&[x-placement^="top"] {
33+
@extend .bs-tooltip-top;
34+
}
35+
&[x-placement^="right"] {
36+
@extend .bs-tooltip-right;
37+
}
38+
&[x-placement^="bottom"] {
39+
@extend .bs-tooltip-bottom;
40+
}
41+
&[x-placement^="left"] {
42+
@extend .bs-tooltip-left;
43+
}
44+
}
45+
46+
.tooltip-inner {
47+
color: color-yiq($value);
48+
background-color: $value;
49+
}
50+
}
51+
}
52+
}

‎src/components/tooltip/index.scss

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@import "tooltip";

‎src/components/tooltip/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
"meta": {
55
"title": "Tooltip",
66
"description": "Easily add tooltips to elements or components via the <b-tooltip> component or v-b-tooltip directive.",
7+
"enhanced": true,
78
"directives": [
89
"VBTooltip"
910
],

‎src/components/tooltip/tooltip.js

+8
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,14 @@ export const BTooltip = /*#__PURE__*/ Vue.extend({
3333
return isArray(value) || arrayIncludes(['flip', 'clockwise', 'counterclockwise'], value)
3434
}
3535
},
36+
variant: {
37+
type: String,
38+
default: () => getComponentConfig(NAME, 'variant')
39+
},
40+
customClass: {
41+
type: String,
42+
default: () => getComponentConfig(NAME, 'customClass')
43+
},
3644
delay: {
3745
type: [Number, Object, String],
3846
default: () => getComponentConfig(NAME, 'delay')

0 commit comments

Comments
 (0)