]>
Commit | Line | Data |
---|---|---|
59c06b17 CS |
1 | // |
2 | // Tooltips | |
3 | // -------------------------------------------------- | |
4 | ||
5 | ||
6 | // Base class | |
7 | .tooltip { | |
8 | position: absolute; | |
9 | z-index: @zindexTooltip; | |
10 | display: block; | |
11 | visibility: visible; | |
12 | padding: 5px; | |
13 | font-size: 11px; | |
14 | .opacity(0); | |
15 | &.in { .opacity(80); } | |
16 | &.top { margin-top: -3px; } | |
17 | &.right { margin-left: 3px; } | |
18 | &.bottom { margin-top: 3px; } | |
19 | &.left { margin-left: -3px; } | |
20 | } | |
21 | ||
22 | // Wrapper for the tooltip content | |
23 | .tooltip-inner { | |
24 | max-width: 200px; | |
25 | padding: 3px 8px; | |
26 | color: @tooltipColor; | |
27 | text-align: center; | |
28 | text-decoration: none; | |
29 | background-color: @tooltipBackground; | |
30 | .border-radius(4px); | |
31 | } | |
32 | ||
33 | // Arrows | |
34 | .tooltip-arrow { | |
35 | position: absolute; | |
36 | width: 0; | |
37 | height: 0; | |
38 | border-color: transparent; | |
39 | border-style: solid; | |
40 | } | |
41 | .tooltip { | |
42 | &.top .tooltip-arrow { | |
43 | bottom: 0; | |
44 | left: 50%; | |
45 | margin-left: -@tooltipArrowWidth; | |
46 | border-width: @tooltipArrowWidth @tooltipArrowWidth 0; | |
47 | border-top-color: @tooltipArrowColor; | |
48 | } | |
49 | &.right .tooltip-arrow { | |
50 | top: 50%; | |
51 | left: 0; | |
52 | margin-top: -@tooltipArrowWidth; | |
53 | border-width: @tooltipArrowWidth @tooltipArrowWidth @tooltipArrowWidth 0; | |
54 | border-right-color: @tooltipArrowColor; | |
55 | } | |
56 | &.left .tooltip-arrow { | |
57 | top: 50%; | |
58 | right: 0; | |
59 | margin-top: -@tooltipArrowWidth; | |
60 | border-width: @tooltipArrowWidth 0 @tooltipArrowWidth @tooltipArrowWidth; | |
61 | border-left-color: @tooltipArrowColor; | |
62 | } | |
63 | &.bottom .tooltip-arrow { | |
64 | top: 0; | |
65 | left: 50%; | |
66 | margin-left: -@tooltipArrowWidth; | |
67 | border-width: 0 @tooltipArrowWidth @tooltipArrowWidth; | |
68 | border-bottom-color: @tooltipArrowColor; | |
69 | } | |
70 | } |