1.popover {
2  position: absolute;
3  top: 0;
4  // left: 0;
5  z-index: $zindex-popover;
6  display: block;
7  max-width: $popover-max-width;
8  // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
9  // So reset our font and text properties to avoid inheriting weird values.
10  @include reset-text();
11  @include font-size($popover-font-size);
12  // Allow breaking very long words so they don't overflow the popover's bounds
13  word-wrap: break-word;
14  background-color: $popover-bg;
15  background-clip: padding-box;
16  border: $popover-border-width solid $popover-border-color;
17  @include border-radius($popover-border-radius);
18  @include box-shadow($popover-box-shadow);
19
20  .arrow {
21    position: absolute;
22    display: block;
23    width: $popover-arrow-width;
24    height: $popover-arrow-height;
25    margin: 0 $popover-border-radius;
26
27    &::before,
28    &::after {
29      position: absolute;
30      display: block;
31      content: "";
32      border-color: transparent;
33      border-style: solid;
34    }
35  }
36}
37
38.bs-popover-top {
39  margin-bottom: $popover-arrow-height;
40
41  > .arrow {
42    bottom: subtract(-$popover-arrow-height, $popover-border-width);
43
44    &::before {
45      bottom: 0;
46      border-width: $popover-arrow-height ($popover-arrow-width / 2) 0;
47      border-top-color: $popover-arrow-outer-color;
48    }
49
50    &::after {
51      bottom: $popover-border-width;
52      border-width: $popover-arrow-height ($popover-arrow-width / 2) 0;
53      border-top-color: $popover-arrow-color;
54    }
55  }
56}
57
58.bs-popover-right {
59  margin-left: $popover-arrow-height;
60
61  > .arrow {
62    left: subtract(-$popover-arrow-height, $popover-border-width);
63    width: $popover-arrow-height;
64    height: $popover-arrow-width;
65    margin: $popover-border-radius 0; // make sure the arrow does not touch the popover's rounded corners
66
67    &::before {
68      left: 0;
69      border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0;
70      border-right-color: $popover-arrow-outer-color;
71    }
72
73    &::after {
74      left: $popover-border-width;
75      border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0;
76      border-right-color: $popover-arrow-color;
77    }
78  }
79}
80
81.bs-popover-bottom {
82  margin-top: $popover-arrow-height;
83
84  > .arrow {
85    top: subtract(-$popover-arrow-height, $popover-border-width);
86
87    &::before {
88      top: 0;
89      border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2);
90      border-bottom-color: $popover-arrow-outer-color;
91    }
92
93    &::after {
94      top: $popover-border-width;
95      border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2);
96      border-bottom-color: $popover-arrow-color;
97    }
98  }
99
100  // This will remove the popover-header's border just below the arrow
101  .popover-header::before {
102    position: absolute;
103    top: 0;
104    left: 50%;
105    display: block;
106    width: $popover-arrow-width;
107    margin-left: -$popover-arrow-width / 2;
108    content: "";
109    border-bottom: $popover-border-width solid $popover-header-bg;
110  }
111}
112
113.bs-popover-left {
114  margin-right: $popover-arrow-height;
115
116  > .arrow {
117    right: subtract(-$popover-arrow-height, $popover-border-width);
118    width: $popover-arrow-height;
119    height: $popover-arrow-width;
120    margin: $popover-border-radius 0; // make sure the arrow does not touch the popover's rounded corners
121
122    &::before {
123      right: 0;
124      border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height;
125      border-left-color: $popover-arrow-outer-color;
126    }
127
128    &::after {
129      right: $popover-border-width;
130      border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height;
131      border-left-color: $popover-arrow-color;
132    }
133  }
134}
135
136.bs-popover-auto {
137  &[x-placement^="top"] {
138    @extend .bs-popover-top;
139  }
140  &[x-placement^="right"] {
141    @extend .bs-popover-right;
142  }
143  &[x-placement^="bottom"] {
144    @extend .bs-popover-bottom;
145  }
146  &[x-placement^="left"] {
147    @extend .bs-popover-left;
148  }
149}
150
151
152// Offset the popover to account for the popover arrow
153.popover-header {
154  padding: $popover-header-padding-y $popover-header-padding-x;
155  margin-bottom: 0; // Reset the default from Reboot
156  @include font-size($font-size-base);
157  color: $popover-header-color;
158  background-color: $popover-header-bg;
159  border-bottom: $popover-border-width solid darken($popover-header-bg, 5%);
160  @include border-top-radius($popover-inner-border-radius);
161
162  &:empty {
163    display: none;
164  }
165}
166
167.popover-body {
168  padding: $popover-body-padding-y $popover-body-padding-x;
169  color: $popover-body-color;
170}
171