5 z-index: $zindex-popover;
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);
23 width: $popover-arrow-width;
24 height: $popover-arrow-height;
25 margin: 0 $popover-border-radius;
32 border-color: transparent;
39 margin-bottom: $popover-arrow-height;
42 bottom: subtract(-$popover-arrow-height, $popover-border-width);
46 border-width: $popover-arrow-height ($popover-arrow-width / 2) 0;
47 border-top-color: $popover-arrow-outer-color;
51 bottom: $popover-border-width;
52 border-width: $popover-arrow-height ($popover-arrow-width / 2) 0;
53 border-top-color: $popover-arrow-color;
59 margin-left: $popover-arrow-height;
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
69 border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0;
70 border-right-color: $popover-arrow-outer-color;
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;
82 margin-top: $popover-arrow-height;
85 top: subtract(-$popover-arrow-height, $popover-border-width);
89 border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2);
90 border-bottom-color: $popover-arrow-outer-color;
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;
100 // This will remove the popover-header's border just below the arrow
101 .popover-header::before {
106 width: $popover-arrow-width;
107 margin-left: -$popover-arrow-width / 2;
109 border-bottom: $popover-border-width solid $popover-header-bg;
114 margin-right: $popover-arrow-height;
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
124 border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height;
125 border-left-color: $popover-arrow-outer-color;
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;
137 &[x-placement^="top"] {
138 @extend .bs-popover-top;
140 &[x-placement^="right"] {
141 @extend .bs-popover-right;
143 &[x-placement^="bottom"] {
144 @extend .bs-popover-bottom;
146 &[x-placement^="left"] {
147 @extend .bs-popover-left;
152 // Offset the popover to account for the popover arrow
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);
168 padding: $popover-body-padding-y $popover-body-padding-x;
169 color: $popover-body-color;