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  font-size: 11px;
13  line-height: 1.4;
14  .opacity(0);
15  &.in     { .opacity(80); }
16  &.top    { margin-top:  -3px; padding: 5px 0; }
17  &.right  { margin-left:  3px; padding: 0 5px; }
18  &.bottom { margin-top:   3px; padding: 5px 0; }
19  &.left   { margin-left: -3px; padding: 0 5px; }
20}
21
22// Wrapper for the tooltip content
23.tooltip-inner {
24  max-width: 200px;
25  padding: 8px;
26  color: @tooltipColor;
27  text-align: center;
28  text-decoration: none;
29  background-color: @tooltipBackground;
30  .border-radius(@baseBorderRadius);
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}
71