]>
Commit | Line | Data |
---|---|---|
91e44d91 S |
1 | // Base class |
2 | .tooltip { | |
3 | position: absolute; | |
4 | z-index: $zindex-tooltip; | |
5 | display: block; | |
6 | // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element. | |
7 | // So reset our font and text properties to avoid inheriting weird values. | |
8 | @include reset-text(); | |
9 | font-size: $font-size-sm; | |
10 | // Allow breaking very long words so they don't overflow the tooltip's bounds | |
11 | word-wrap: break-word; | |
12 | opacity: 0; | |
13 | ||
14 | &.show { opacity: $tooltip-opacity; } | |
15 | ||
16 | &.tooltip-top, | |
17 | &.bs-tether-element-attached-bottom { | |
18 | padding: $tooltip-arrow-width 0; | |
19 | margin-top: -$tooltip-margin; | |
20 | ||
21 | .tooltip-inner::before { | |
22 | bottom: 0; | |
23 | left: 50%; | |
24 | margin-left: -$tooltip-arrow-width; | |
25 | content: ""; | |
26 | border-width: $tooltip-arrow-width $tooltip-arrow-width 0; | |
27 | border-top-color: $tooltip-arrow-color; | |
28 | } | |
29 | } | |
30 | &.tooltip-right, | |
31 | &.bs-tether-element-attached-left { | |
32 | padding: 0 $tooltip-arrow-width; | |
33 | margin-left: $tooltip-margin; | |
34 | ||
35 | .tooltip-inner::before { | |
36 | top: 50%; | |
37 | left: 0; | |
38 | margin-top: -$tooltip-arrow-width; | |
39 | content: ""; | |
40 | border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0; | |
41 | border-right-color: $tooltip-arrow-color; | |
42 | } | |
43 | } | |
44 | &.tooltip-bottom, | |
45 | &.bs-tether-element-attached-top { | |
46 | padding: $tooltip-arrow-width 0; | |
47 | margin-top: $tooltip-margin; | |
48 | ||
49 | .tooltip-inner::before { | |
50 | top: 0; | |
51 | left: 50%; | |
52 | margin-left: -$tooltip-arrow-width; | |
53 | content: ""; | |
54 | border-width: 0 $tooltip-arrow-width $tooltip-arrow-width; | |
55 | border-bottom-color: $tooltip-arrow-color; | |
56 | } | |
57 | } | |
58 | &.tooltip-left, | |
59 | &.bs-tether-element-attached-right { | |
60 | padding: 0 $tooltip-arrow-width; | |
61 | margin-left: -$tooltip-margin; | |
62 | ||
63 | .tooltip-inner::before { | |
64 | top: 50%; | |
65 | right: 0; | |
66 | margin-top: -$tooltip-arrow-width; | |
67 | content: ""; | |
68 | border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width; | |
69 | border-left-color: $tooltip-arrow-color; | |
70 | } | |
71 | } | |
72 | } | |
73 | ||
74 | // Wrapper for the tooltip content | |
75 | .tooltip-inner { | |
76 | max-width: $tooltip-max-width; | |
77 | padding: $tooltip-padding-y $tooltip-padding-x; | |
78 | color: $tooltip-color; | |
79 | text-align: center; | |
80 | background-color: $tooltip-bg; | |
81 | @include border-radius($border-radius); | |
82 | ||
83 | &::before { | |
84 | position: absolute; | |
85 | width: 0; | |
86 | height: 0; | |
87 | border-color: transparent; | |
88 | border-style: solid; | |
89 | } | |
90 | } |