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