talos

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 * .5) 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 * .5) $tooltip-arrow-height ($tooltip-arrow-width * .5) 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 * .5) $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 * .5) 0 ($tooltip-arrow-width * .5) $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