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  @include font-size($tooltip-font-size);
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    &::before {
24      position: absolute;
25      content: "";
26      border-color: transparent;
27      border-style: solid;
28    }
29  }
30}
31
32.bs-tooltip-top {
33  padding: $tooltip-arrow-height 0;
34
35  .arrow {
36    bottom: 0;
37
38    &::before {
39      top: 0;
40      border-width: $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
41      border-top-color: $tooltip-arrow-color;
42    }
43  }
44}
45
46.bs-tooltip-right {
47  padding: 0 $tooltip-arrow-height;
48
49  .arrow {
50    left: 0;
51    width: $tooltip-arrow-height;
52    height: $tooltip-arrow-width;
53
54    &::before {
55      right: 0;
56      border-width: ($tooltip-arrow-width / 2) $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
57      border-right-color: $tooltip-arrow-color;
58    }
59  }
60}
61
62.bs-tooltip-bottom {
63  padding: $tooltip-arrow-height 0;
64
65  .arrow {
66    top: 0;
67
68    &::before {
69      bottom: 0;
70      border-width: 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
71      border-bottom-color: $tooltip-arrow-color;
72    }
73  }
74}
75
76.bs-tooltip-left {
77  padding: 0 $tooltip-arrow-height;
78
79  .arrow {
80    right: 0;
81    width: $tooltip-arrow-height;
82    height: $tooltip-arrow-width;
83
84    &::before {
85      left: 0;
86      border-width: ($tooltip-arrow-width / 2) 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
87      border-left-color: $tooltip-arrow-color;
88    }
89  }
90}
91
92.bs-tooltip-auto {
93  &[x-placement^="top"] {
94    @extend .bs-tooltip-top;
95  }
96  &[x-placement^="right"] {
97    @extend .bs-tooltip-right;
98  }
99  &[x-placement^="bottom"] {
100    @extend .bs-tooltip-bottom;
101  }
102  &[x-placement^="left"] {
103    @extend .bs-tooltip-left;
104  }
105}
106
107// Wrapper for the tooltip content
108.tooltip-inner {
109  max-width: $tooltip-max-width;
110  padding: $tooltip-padding-y $tooltip-padding-x;
111  color: $tooltip-color;
112  text-align: center;
113  background-color: $tooltip-bg;
114  @include border-radius($tooltip-border-radius);
115}
116