]>
Commit | Line | Data |
---|---|---|
1 | // | |
2 | // Tooltips | |
3 | // -------------------------------------------------- | |
4 | ||
5 | ||
6 | // Base class | |
7 | .tooltip { | |
8 | position: absolute; | |
9 | z-index: @zindex-tooltip; | |
10 | display: block; | |
11 | visibility: visible; | |
12 | font-size: @font-size-small; | |
13 | line-height: 1.4; | |
14 | .opacity(0); | |
15 | ||
16 | &.in { .opacity(.9); } | |
17 | &.top { margin-top: -3px; padding: @tooltip-arrow-width 0; } | |
18 | &.right { margin-left: 3px; padding: 0 @tooltip-arrow-width; } | |
19 | &.bottom { margin-top: 3px; padding: @tooltip-arrow-width 0; } | |
20 | &.left { margin-left: -3px; padding: 0 @tooltip-arrow-width; } | |
21 | } | |
22 | ||
23 | // Wrapper for the tooltip content | |
24 | .tooltip-inner { | |
25 | max-width: @tooltip-max-width; | |
26 | padding: 3px 8px; | |
27 | color: @tooltip-color; | |
28 | text-align: center; | |
29 | text-decoration: none; | |
30 | background-color: @tooltip-bg; | |
31 | border-radius: @border-radius-base; | |
32 | } | |
33 | ||
34 | // Arrows | |
35 | .tooltip-arrow { | |
36 | position: absolute; | |
37 | width: 0; | |
38 | height: 0; | |
39 | border-color: transparent; | |
40 | border-style: solid; | |
41 | } | |
42 | .tooltip { | |
43 | &.top .tooltip-arrow { | |
44 | bottom: 0; | |
45 | left: 50%; | |
46 | margin-left: -@tooltip-arrow-width; | |
47 | border-width: @tooltip-arrow-width @tooltip-arrow-width 0; | |
48 | border-top-color: @tooltip-arrow-color; | |
49 | } | |
50 | &.top-left .tooltip-arrow { | |
51 | bottom: 0; | |
52 | left: @tooltip-arrow-width; | |
53 | border-width: @tooltip-arrow-width @tooltip-arrow-width 0; | |
54 | border-top-color: @tooltip-arrow-color; | |
55 | } | |
56 | &.top-right .tooltip-arrow { | |
57 | bottom: 0; | |
58 | right: @tooltip-arrow-width; | |
59 | border-width: @tooltip-arrow-width @tooltip-arrow-width 0; | |
60 | border-top-color: @tooltip-arrow-color; | |
61 | } | |
62 | &.right .tooltip-arrow { | |
63 | top: 50%; | |
64 | left: 0; | |
65 | margin-top: -@tooltip-arrow-width; | |
66 | border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0; | |
67 | border-right-color: @tooltip-arrow-color; | |
68 | } | |
69 | &.left .tooltip-arrow { | |
70 | top: 50%; | |
71 | right: 0; | |
72 | margin-top: -@tooltip-arrow-width; | |
73 | border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width; | |
74 | border-left-color: @tooltip-arrow-color; | |
75 | } | |
76 | &.bottom .tooltip-arrow { | |
77 | top: 0; | |
78 | left: 50%; | |
79 | margin-left: -@tooltip-arrow-width; | |
80 | border-width: 0 @tooltip-arrow-width @tooltip-arrow-width; | |
81 | border-bottom-color: @tooltip-arrow-color; | |
82 | } | |
83 | &.bottom-left .tooltip-arrow { | |
84 | top: 0; | |
85 | left: @tooltip-arrow-width; | |
86 | border-width: 0 @tooltip-arrow-width @tooltip-arrow-width; | |
87 | border-bottom-color: @tooltip-arrow-color; | |
88 | } | |
89 | &.bottom-right .tooltip-arrow { | |
90 | top: 0; | |
91 | right: @tooltip-arrow-width; | |
92 | border-width: 0 @tooltip-arrow-width @tooltip-arrow-width; | |
93 | border-bottom-color: @tooltip-arrow-color; | |
94 | } | |
95 | } |