mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-21 04:41:36 +02:00
Code Issues Releases Wiki Activity

Convert tooltips to CSS vars

Browse Source
This commit is contained in:
Mark Otto
2021-07-29 09:21:53 +03:00
committed by Mark Otto
parent 6c40476af9
commit fdcbbe3d92
3 changed files with 70 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
scss/_tooltip.scss
View File

@@ -1,24 +1,40 @@
// Base class // Base class
.tooltip { .tooltip {
// scss-docs-start tooltip-css-vars
--#{$variable-prefix}tooltip-zindex: #{$zindex-tooltip};
--#{$variable-prefix}tooltip-max-width: #{$tooltip-max-width};
--#{$variable-prefix}tooltip-padding-x: #{$tooltip-padding-x};
--#{$variable-prefix}tooltip-padding-y: #{$tooltip-padding-y};
--#{$variable-prefix}tooltip-margin: #{$tooltip-margin};
--#{$variable-prefix}tooltip-font-size: #{$tooltip-font-size};
--#{$variable-prefix}tooltip-color: #{$tooltip-color};
--#{$variable-prefix}tooltip-bg: #{$tooltip-bg};
--#{$variable-prefix}tooltip-border-radius: #{$tooltip-border-radius};
--#{$variable-prefix}tooltip-opacity: #{$tooltip-opacity};
--#{$variable-prefix}tooltip-arrow-width: #{$tooltip-arrow-width};
--#{$variable-prefix}tooltip-arrow-height: #{$tooltip-arrow-height};
$tooltip-arrow-color: null;
position: absolute; position: absolute;
z-index: $zindex-tooltip; z-index: var(--#{$variable-prefix}tooltip-zindex);
display: block; display: block;
margin: $tooltip-margin; margin: var(--#{$variable-prefix}tooltip-margin);
// Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element. // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
// So reset our font and text properties to avoid inheriting weird values. // So reset our font and text properties to avoid inheriting weird values.
@include reset-text(); @include reset-text();
@include font-size($tooltip-font-size); @include font-size(var(--#{$variable-prefix}tooltip-font-size));
// Allow breaking very long words so they don't overflow the tooltip's bounds // Allow breaking very long words so they don't overflow the tooltip's bounds
word-wrap: break-word; word-wrap: break-word;
opacity: 0; opacity: 0;
&.show { opacity: $tooltip-opacity; } &.show { opacity: var(--#{$variable-prefix}tooltip-opacity); }
.tooltip-arrow { .tooltip-arrow {
position: absolute; position: absolute;
display: block; display: block;
width: $tooltip-arrow-width; width: var(--#{$variable-prefix}tooltip-arrow-width);
height: $tooltip-arrow-height; height: var(--#{$variable-prefix}tooltip-arrow-height);
&::before { &::before {
position: absolute; position: absolute;
@@ -30,32 +46,32 @@
} }
.bs-tooltip-top { .bs-tooltip-top {
padding: $tooltip-arrow-height 0; padding: var(--#{$variable-prefix}tooltip-arrow-height) 0;
.tooltip-arrow { .tooltip-arrow {
bottom: 0; bottom: 0;
&::before { &::before {
top: -1px; top: -1px;
border-width: $tooltip-arrow-height ($tooltip-arrow-width * .5) 0; border-width: var(--#{$variable-prefix}tooltip-arrow-height) calc(var(--#{$variable-prefix}tooltip-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
border-top-color: $tooltip-arrow-color; border-top-color: var(--#{$variable-prefix}tooltip-bg);
} }
} }
} }
/* rtl:begin:ignore */ /* rtl:begin:ignore */
.bs-tooltip-end { .bs-tooltip-end {
padding: 0 $tooltip-arrow-height; padding: 0 var(--#{$variable-prefix}tooltip-arrow-height);
.tooltip-arrow { .tooltip-arrow {
left: 0; left: 0;
width: $tooltip-arrow-height; width: var(--#{$variable-prefix}tooltip-arrow-height);
height: $tooltip-arrow-width; height: var(--#{$variable-prefix}tooltip-arrow-width);
&::before { &::before {
right: -1px; right: -1px;
border-width: ($tooltip-arrow-width * .5) $tooltip-arrow-height ($tooltip-arrow-width * .5) 0; 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
border-right-color: $tooltip-arrow-color; border-right-color: var(--#{$variable-prefix}tooltip-bg);
} }
} }
} }
@@ -63,32 +79,32 @@
/* rtl:end:ignore */ /* rtl:end:ignore */
.bs-tooltip-bottom { .bs-tooltip-bottom {
padding: $tooltip-arrow-height 0; padding: var(--#{$variable-prefix}tooltip-arrow-height) 0;
.tooltip-arrow { .tooltip-arrow {
top: 0; top: 0;
&::before { &::before {
bottom: -1px; bottom: -1px;
border-width: 0 ($tooltip-arrow-width * .5) $tooltip-arrow-height; border-width: 0 calc(var(--#{$variable-prefix}tooltip-arrow-width) * .5) var(--#{$variable-prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list
border-bottom-color: $tooltip-arrow-color; border-bottom-color: var(--#{$variable-prefix}tooltip-bg);
} }
} }
} }
/* rtl:begin:ignore */ /* rtl:begin:ignore */
.bs-tooltip-start { .bs-tooltip-start {
padding: 0 $tooltip-arrow-height; padding: 0 var(--#{$variable-prefix}tooltip-arrow-height);
.tooltip-arrow { .tooltip-arrow {
right: 0; right: 0;
width: $tooltip-arrow-height; width: var(--#{$variable-prefix}tooltip-arrow-height);
height: $tooltip-arrow-width; height: var(--#{$variable-prefix}tooltip-arrow-width);
&::before { &::before {
left: -1px; left: -1px;
border-width: ($tooltip-arrow-width * .5) 0 ($tooltip-arrow-width * .5) $tooltip-arrow-height; 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
border-left-color: $tooltip-arrow-color; border-left-color: var(--#{$variable-prefix}tooltip-bg);
} }
} }
} }
@@ -112,10 +128,10 @@
// Wrapper for the tooltip content // Wrapper for the tooltip content
.tooltip-inner { .tooltip-inner {
max-width: $tooltip-max-width; max-width: var(--#{$variable-prefix}tooltip-max-width);
padding: $tooltip-padding-y $tooltip-padding-x; padding: var(--#{$variable-prefix}tooltip-padding-y) var(--#{$variable-prefix}tooltip-padding-x);
color: $tooltip-color; color: var(--#{$variable-prefix}tooltip-color);
text-align: center; text-align: center;
background-color: $tooltip-bg; background-color: var(--#{$variable-prefix}tooltip-bg);
@include border-radius($tooltip-border-radius); border-radius: var(--#{$variable-prefix}tooltip-border-radius, 0); // stylelint-disable-line property-disallowed-list
} }

4
site/assets/scss/_component-examples.scss
View File

@@ -239,6 +239,10 @@
white-space: nowrap; white-space: nowrap;
} }
.custom-tooltip {
--bs-tooltip-bg: var(--bs-primary);
}
// Scrollspy demo on fixed height div // Scrollspy demo on fixed height div
.scrollspy-example { .scrollspy-example {
position: relative; position: relative;

23
site/content/docs/5.1/components/tooltips.md
View File

@@ -50,6 +50,29 @@ Hover over the links below to see tooltips:
</p> </p>
</div> </div>
### Custom tooltips
<small class="d-inline-flex px-2 py-1 font-monospace text-muted border rounded-3">Added in v5.2.0</small>
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.
```scss
.custom-tooltip {
--bs-tooltip-bg: var(--bs-primary);
}
```
{{< example class="tooltip-demo" >}}
<button type="button" class="btn btn-secondary"
data-bs-toggle="tooltip" data-bs-placement="top"
data-bs-custom-class="custom-tooltip"
title="This top tooltip is themed via CSS variables.">
Custom tooltip
</button>
{{< /example >}}
### Directions
Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left. Directions are mirrored when using Bootstrap in RTL. Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left. Directions are mirrored when using Bootstrap in RTL.
<div class="bd-example tooltip-demo"> <div class="bd-example tooltip-demo">