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