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