Fix some css for the arrow of Popover/Tooltip + update documentation

2 files changed, 46 insertions, 48 deletions

diff --git a/scss/_popover.scss b/scss/_popover.scss
index d763039ff..8af1c1fab 100644
--- a/scss/_popover.scss
+++ b/scss/_popover.scss
@@ -18,25 +18,47 @@
   @include border-radius($border-radius-lg);
   @include box-shadow($popover-box-shadow);
 
+  // Arrows
+  //
+  // .popover-arrow is outer, .popover-arrow::after is inner
+
+  .arrow::before,
+  .arrow::after {
+    position: absolute;
+    display: block;
+    width: 0;
+    height: 0;
+    border-color: transparent;
+    border-style: solid;
+  }
+
+  .arrow::before {
+    content: "";
+    border-width: $popover-arrow-outer-width;
+  }
+  .arrow::after {
+    content: "";
+    border-width: $popover-arrow-width;
+  }
 
   // Popover directions
 
   &.bs-popover-top {
     margin-bottom: $popover-arrow-width;
 
-    ::before,
-    ::after {
+    .arrow::before,
+    .arrow::after {
       left: 50%;
       border-bottom-width: 0;
     }
 
-    ::before {
+    .arrow::before {
       bottom: -$popover-arrow-outer-width;
       margin-left: -$popover-arrow-outer-width;
       border-top-color: $popover-arrow-outer-color;
     }
 
-    ::after {
+    .arrow::after {
       bottom: -($popover-arrow-outer-width - 1);
       margin-left: -$popover-arrow-width;
       border-top-color: $popover-arrow-color;
@@ -46,19 +68,19 @@
   &.bs-popover-right {
     margin-left: $popover-arrow-width;
 
-    ::before,
-    ::after {
+    .arrow::before,
+    .arrow::after {
       top: 50%;
       border-left-width: 0;
     }
 
-    ::before {
+    .arrow::before {
       left: -$popover-arrow-outer-width;
       margin-top: -$popover-arrow-outer-width;
       border-right-color: $popover-arrow-outer-color;
     }
 
-    ::after {
+    .arrow::after {
       left: -($popover-arrow-outer-width - 1);
       margin-top: -($popover-arrow-outer-width - 1);
       border-right-color: $popover-arrow-color;
@@ -68,19 +90,19 @@
   &.bs-popover-bottom {
     margin-top: $popover-arrow-width;
 
-    ::before,
-    ::after {
+    .arrow::before,
+    .arrow::after {
       left: 50%;
       border-top-width: 0;
     }
 
-    ::before {
+    .arrow::before {
       top: -$popover-arrow-outer-width;
       margin-left: -$popover-arrow-outer-width;
       border-bottom-color: $popover-arrow-outer-color;
     }
 
-    ::after {
+    .arrow::after {
       top: -($popover-arrow-outer-width - 1);
       margin-left: -$popover-arrow-width;
       border-bottom-color: $popover-arrow-color;
@@ -102,19 +124,19 @@
   &.bs-popover-left {
     margin-right: $popover-arrow-width;
 
-    ::before,
-    ::after {
+    .arrow::before,
+    .arrow::after {
       top: 50%;
       border-right-width: 0;
     }
 
-    ::before {
+    .arrow::before {
       right: -$popover-arrow-outer-width;
       margin-top: -$popover-arrow-outer-width;
       border-left-color: $popover-arrow-outer-color;
     }
 
-    ::after {
+    .arrow::after {
       right: -($popover-arrow-outer-width - 1);
       margin-top: -($popover-arrow-outer-width - 1);
       border-left-color: $popover-arrow-color;
@@ -143,27 +165,3 @@
   padding: $popover-content-padding-y $popover-content-padding-x;
   color: $popover-content-color;
 }
-
-
-// Arrows
-//
-// .popover-arrow is outer, .popover-arrow::after is inner
-
-.arrow::before,
-.arrow::after {
-  position: absolute;
-  display: block;
-  width: 0;
-  height: 0;
-  border-color: transparent;
-  border-style: solid;
-}
-
-.arrow::before {
-  content: "";
-  border-width: $popover-arrow-outer-width;
-}
-.arrow::after {
-  content: "";
-  border-width: $popover-arrow-width;
-}
diff --git a/scss/_tooltip.scss b/scss/_tooltip.scss
index 4006b46d9..d67dc4460 100644
--- a/scss/_tooltip.scss
+++ b/scss/_tooltip.scss
@@ -65,6 +65,14 @@
       border-left-color: $tooltip-arrow-color;
     }
   }
+
+  .arrow::before {
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-color: transparent;
+    border-style: solid;
+  }
 }
 
 // Wrapper for the tooltip content
@@ -75,12 +83,4 @@
   text-align: center;
   background-color: $tooltip-bg;
   @include border-radius($border-radius);
-
-  .arrow::before {
-    position: absolute;
-    width: 0;
-    height: 0;
-    border-color: transparent;
-    border-style: solid;
-  }
 }