Skip to content

Commit fdcbbe3

Browse files
mdomdo
committed
Convert tooltips to CSS vars
1 parent 6c40476 commit fdcbbe3

File tree

3 files changed

+70
-27
lines changed

3 files changed

+70
-27
lines changed

‎scss/_tooltip.scss‎

Lines changed: 43 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,40 @@
11
// Base class
22
.tooltip {
3+
// scss-docs-start tooltip-css-vars
4+
--#{$variable-prefix}tooltip-zindex: #{$zindex-tooltip};
5+
--#{$variable-prefix}tooltip-max-width: #{$tooltip-max-width};
6+
--#{$variable-prefix}tooltip-padding-x: #{$tooltip-padding-x};
7+
--#{$variable-prefix}tooltip-padding-y: #{$tooltip-padding-y};
8+
--#{$variable-prefix}tooltip-margin: #{$tooltip-margin};
9+
--#{$variable-prefix}tooltip-font-size: #{$tooltip-font-size};
10+
--#{$variable-prefix}tooltip-color: #{$tooltip-color};
11+
--#{$variable-prefix}tooltip-bg: #{$tooltip-bg};
12+
--#{$variable-prefix}tooltip-border-radius: #{$tooltip-border-radius};
13+
--#{$variable-prefix}tooltip-opacity: #{$tooltip-opacity};
14+
--#{$variable-prefix}tooltip-arrow-width: #{$tooltip-arrow-width};
15+
--#{$variable-prefix}tooltip-arrow-height: #{$tooltip-arrow-height};
16+
17+
$tooltip-arrow-color: null;
18+
319
position: absolute;
4-
z-index: $zindex-tooltip;
20+
z-index: var(--#{$variable-prefix}tooltip-zindex);
521
display: block;
6-
margin: $tooltip-margin;
22+
margin: var(--#{$variable-prefix}tooltip-margin);
723
// Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
824
// So reset our font and text properties to avoid inheriting weird values.
925
@include reset-text();
10-
@include font-size($tooltip-font-size);
26+
@include font-size(var(--#{$variable-prefix}tooltip-font-size));
1127
// Allow breaking very long words so they don't overflow the tooltip's bounds
1228
word-wrap: break-word;
1329
opacity: 0;
1430

15-
&.show { opacity: $tooltip-opacity; }
31+
&.show { opacity: var(--#{$variable-prefix}tooltip-opacity); }
1632

1733
.tooltip-arrow {
1834
position: absolute;
1935
display: block;
20-
width: $tooltip-arrow-width;
21-
height: $tooltip-arrow-height;
36+
width: var(--#{$variable-prefix}tooltip-arrow-width);
37+
height: var(--#{$variable-prefix}tooltip-arrow-height);
2238

2339
&::before {
2440
position: absolute;
@@ -30,65 +46,65 @@
3046
}
3147

3248
.bs-tooltip-top {
33-
padding: $tooltip-arrow-height 0;
49+
padding: var(--#{$variable-prefix}tooltip-arrow-height) 0;
3450

3551
.tooltip-arrow {
3652
bottom: 0;
3753

3854
&::before {
3955
top: -1px;
40-
border-width: $tooltip-arrow-height ($tooltip-arrow-width * .5) 0;
41-
border-top-color: $tooltip-arrow-color;
56+
border-width: var(--#{$variable-prefix}tooltip-arrow-height) calc(var(--#{$variable-prefix}tooltip-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
57+
border-top-color: var(--#{$variable-prefix}tooltip-bg);
4258
}
4359
}
4460
}
4561

4662
/* rtl:begin:ignore */
4763
.bs-tooltip-end {
48-
padding: 0 $tooltip-arrow-height;
64+
padding: 0 var(--#{$variable-prefix}tooltip-arrow-height);
4965

5066
.tooltip-arrow {
5167
left: 0;
52-
width: $tooltip-arrow-height;
53-
height: $tooltip-arrow-width;
68+
width: var(--#{$variable-prefix}tooltip-arrow-height);
69+
height: var(--#{$variable-prefix}tooltip-arrow-width);
5470

5571
&::before {
5672
right: -1px;
57-
border-width: ($tooltip-arrow-width * .5) $tooltip-arrow-height ($tooltip-arrow-width * .5) 0;
58-
border-right-color: $tooltip-arrow-color;
73+
border-width: calc(var(--#{$variable-prefix}tooltip-arrow-width) * .5) var(--#{$variable-prefix}tooltip-arrow-height) calc(var(--#{$variable-prefix}tooltip-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
74+
border-right-color: var(--#{$variable-prefix}tooltip-bg);
5975
}
6076
}
6177
}
6278

6379
/* rtl:end:ignore */
6480

6581
.bs-tooltip-bottom {
66-
padding: $tooltip-arrow-height 0;
82+
padding: var(--#{$variable-prefix}tooltip-arrow-height) 0;
6783

6884
.tooltip-arrow {
6985
top: 0;
7086

7187
&::before {
7288
bottom: -1px;
73-
border-width: 0 ($tooltip-arrow-width * .5) $tooltip-arrow-height;
74-
border-bottom-color: $tooltip-arrow-color;
89+
border-width: 0 calc(var(--#{$variable-prefix}tooltip-arrow-width) * .5) var(--#{$variable-prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list
90+
border-bottom-color: var(--#{$variable-prefix}tooltip-bg);
7591
}
7692
}
7793
}
7894

7995
/* rtl:begin:ignore */
8096
.bs-tooltip-start {
81-
padding: 0 $tooltip-arrow-height;
97+
padding: 0 var(--#{$variable-prefix}tooltip-arrow-height);
8298

8399
.tooltip-arrow {
84100
right: 0;
85-
width: $tooltip-arrow-height;
86-
height: $tooltip-arrow-width;
101+
width: var(--#{$variable-prefix}tooltip-arrow-height);
102+
height: var(--#{$variable-prefix}tooltip-arrow-width);
87103

88104
&::before {
89105
left: -1px;
90-
border-width: ($tooltip-arrow-width * .5) 0 ($tooltip-arrow-width * .5) $tooltip-arrow-height;
91-
border-left-color: $tooltip-arrow-color;
106+
border-width: calc(var(--#{$variable-prefix}tooltip-arrow-width) * .5) 0 calc(var(--#{$variable-prefix}tooltip-arrow-width) * .5) var(--#{$variable-prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list
107+
border-left-color: var(--#{$variable-prefix}tooltip-bg);
92108
}
93109
}
94110
}
@@ -112,10 +128,10 @@
112128

113129
// Wrapper for the tooltip content
114130
.tooltip-inner {
115-
max-width: $tooltip-max-width;
116-
padding: $tooltip-padding-y $tooltip-padding-x;
117-
color: $tooltip-color;
131+
max-width: var(--#{$variable-prefix}tooltip-max-width);
132+
padding: var(--#{$variable-prefix}tooltip-padding-y) var(--#{$variable-prefix}tooltip-padding-x);
133+
color: var(--#{$variable-prefix}tooltip-color);
118134
text-align: center;
119-
background-color: $tooltip-bg;
120-
@include border-radius($tooltip-border-radius);
135+
background-color: var(--#{$variable-prefix}tooltip-bg);
136+
border-radius: var(--#{$variable-prefix}tooltip-border-radius, 0); // stylelint-disable-line property-disallowed-list
121137
}

‎site/assets/scss/_component-examples.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -239,6 +239,10 @@
239239
white-space: nowrap;
240240
}
241241

242+
.custom-tooltip {
243+
--bs-tooltip-bg: var(--bs-primary);
244+
}
245+
242246
// Scrollspy demo on fixed height div
243247
.scrollspy-example {
244248
position: relative;

‎site/content/docs/5.1/components/tooltips.md‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,29 @@ Hover over the links below to see tooltips:
5050
</p>
5151
</div>
5252

53+
### Custom tooltips
54+
55+
<small class="d-inline-flex px-2 py-1 font-monospace text-muted border rounded-3">Added in v5.2.0</small>
56+
57+
You can customize the appearance of tooltips using [CSS variables](#variables). We set a custom class with `data-bs-custom-class="custom-tooltip"` to scope our custom appearance and use it to override a local CSS variable.
58+
59+
```scss
60+
.custom-tooltip {
61+
--bs-tooltip-bg: var(--bs-primary);
62+
}
63+
```
64+
65+
{{< example class="tooltip-demo" >}}
66+
<button type="button" class="btn btn-secondary"
67+
data-bs-toggle="tooltip" data-bs-placement="top"
68+
data-bs-custom-class="custom-tooltip"
69+
title="This top tooltip is themed via CSS variables.">
70+
Custom tooltip
71+
</button>
72+
{{< /example >}}
73+
74+
### Directions
75+
5376
Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left. Directions are mirrored when using Bootstrap in RTL.
5477

5578
<div class="bd-example tooltip-demo">

0 commit comments

Comments
 (0)