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 font-size: $font-size-sm;
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($border-radius-lg);
18 @include box-shadow($popover-box-shadow);
23 width: $popover-arrow-width;
24 height: $popover-arrow-height;
25 margin: 0 $border-radius-lg;
32 border-color: transparent;
39 margin-bottom: $popover-arrow-height;
42 bottom: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
47 border-width: $popover-arrow-height ($popover-arrow-width / 2) 0;
52 border-top-color: $popover-arrow-outer-color;
56 bottom: $popover-border-width;
57 border-top-color: $popover-arrow-color;
62 margin-left: $popover-arrow-height;
65 left: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
66 width: $popover-arrow-height;
67 height: $popover-arrow-width;
68 margin: $border-radius-lg 0; // make sure the arrow does not touch the popover's rounded corners
73 border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0;
78 border-right-color: $popover-arrow-outer-color;
82 left: $popover-border-width;
83 border-right-color: $popover-arrow-color;
88 margin-top: $popover-arrow-height;
91 top: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
96 border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2);
101 border-bottom-color: $popover-arrow-outer-color;
105 top: $popover-border-width;
106 border-bottom-color: $popover-arrow-color;
109 // This will remove the popover-header's border just below the arrow
110 .popover-header::before {
115 width: $popover-arrow-width;
116 margin-left: ($popover-arrow-width / -2);
118 border-bottom: $popover-border-width solid $popover-header-bg;
123 margin-right: $popover-arrow-height;
126 right: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
127 width: $popover-arrow-height;
128 height: $popover-arrow-width;
129 margin: $border-radius-lg 0; // make sure the arrow does not touch the popover's rounded corners
134 border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height;
139 border-left-color: $popover-arrow-outer-color;
143 right: $popover-border-width;
144 border-left-color: $popover-arrow-color;
149 &[x-placement^="top"] {
150 @extend .bs-popover-top;
152 &[x-placement^="right"] {
153 @extend .bs-popover-right;
155 &[x-placement^="bottom"] {
156 @extend .bs-popover-bottom;
158 &[x-placement^="left"] {
159 @extend .bs-popover-left;
164 // Offset the popover to account for the popover arrow
166 padding: $popover-header-padding-y $popover-header-padding-x;
167 margin-bottom: 0; // Reset the default from Reboot
168 font-size: $font-size-base;
169 color: $popover-header-color;
170 background-color: $popover-header-bg;
171 border-bottom: $popover-border-width solid darken($popover-header-bg, 5%);
172 $offset-border-width: calc(#{$border-radius-lg} - #{$popover-border-width});
173 @include border-top-radius($offset-border-width);
181 padding: $popover-body-padding-y $popover-body-padding-x;
182 color: $popover-body-color;