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