|
| 1 | +// (C) 2023 GoodData Corporation |
| 2 | +// Custom tooltip styles |
| 3 | + |
1 | 4 | @import "variables/variables"; |
2 | 5 |
|
| 6 | +// Override Bootstrap tooltip background color |
3 | 7 | .tooltip { |
4 | 8 | font-family: inherit; |
5 | 9 |
|
6 | 10 | .tooltip-inner { |
7 | | - padding: 12px 15px; |
8 | | - text-align: left; |
9 | | - max-width: 300px; |
10 | | - font-family: inherit; |
11 | | - color: $color-white; |
12 | | - background-color: $color-tooltip; |
| 11 | + padding: 12px 15px; |
| 12 | + text-align: left; |
| 13 | + max-width: 300px; |
| 14 | + font-family: inherit; |
| 15 | + color: $color-white; |
| 16 | + text-align: center; |
| 17 | + background-color: $color-deep-purple; |
13 | 18 | } |
14 | 19 |
|
15 | | - &.bs-tooltip-right .arrow:before { |
16 | | - border-right-color: $color-tooltip; |
| 20 | + // Override tooltip arrow colors for all directions |
| 21 | + &.bs-tooltip-top .tooltip-arrow::before, |
| 22 | + &.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before { |
| 23 | + border-top-color: $color-deep-purple; |
17 | 24 | } |
18 | 25 |
|
19 | | - &.bs-tooltip-top .arrow:before { |
20 | | - border-top-color: $color-tooltip; |
| 26 | + &.bs-tooltip-right .tooltip-arrow::before, |
| 27 | + &.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before { |
| 28 | + border-right-color: $color-deep-purple; |
21 | 29 | } |
22 | 30 |
|
23 | | - &.bs-tooltip-left .arrow:before { |
24 | | - border-left-color: $color-tooltip; |
| 31 | + &.bs-tooltip-bottom .tooltip-arrow::before, |
| 32 | + &.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before { |
| 33 | + border-bottom-color: $color-deep-purple; |
25 | 34 | } |
26 | 35 |
|
27 | | - &.bs-tooltip-bottom .arrow:before { |
28 | | - border-bottom-color: $color-tooltip; |
| 36 | + &.bs-tooltip-left .tooltip-arrow::before, |
| 37 | + &.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before { |
| 38 | + border-left-color: $color-deep-purple; |
29 | 39 | } |
30 | | - } |
| 40 | +} |
| 41 | + |
| 42 | +// Additional fallback for older Bootstrap versions |
| 43 | +.bs-tooltip-top .tooltip-arrow::before, |
| 44 | +.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before { |
| 45 | + border-top-color: $color-deep-purple; |
| 46 | +} |
| 47 | + |
| 48 | +.bs-tooltip-right .tooltip-arrow::before, |
| 49 | +.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before { |
| 50 | + border-right-color: $color-deep-purple; |
| 51 | +} |
| 52 | + |
| 53 | +.bs-tooltip-bottom .tooltip-arrow::before, |
| 54 | +.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before { |
| 55 | + border-bottom-color: $color-deep-purple; |
| 56 | +} |
| 57 | + |
| 58 | +.bs-tooltip-left .tooltip-arrow::before, |
| 59 | +.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before { |
| 60 | + border-left-color: $color-deep-purple; |
| 61 | +} |
0 commit comments