Convert popover's arrows to generated CSS content via :before/:after

Author: brnrdog

js/src/popover.js

@@ -28,7 +28,6 @@ const Popover = (($) => {
     trigger   : 'click',
     content   : '',
     template  : '<div class="popover" role="tooltip">'
-              + '<div class="popover-arrow"></div>'
               + '<h3 class="popover-title"></h3>'
               + '<div class="popover-content"></div></div>'
   })
@@ -44,8 +43,7 @@ const Popover = (($) => {
 
   const Selector = {
     TITLE   : '.popover-title',
-    CONTENT : '.popover-content',
-    ARROW   : '.popover-arrow'
+    CONTENT : '.popover-content'
   }
 
   const Event = {

scss/_popover.scss

@@ -23,79 +23,103 @@
   &.bs-tether-element-attached-bottom {
     margin-top: -$popover-arrow-width;
 
-    .popover-arrow {
-      bottom: -$popover-arrow-outer-width;
+    &::before,
+    &::after {
       left: 50%;
+      border-bottom-width: 0;
+    }
+
+    &::before {
+      bottom: -$popover-arrow-outer-width;
       margin-left: -$popover-arrow-outer-width;
       border-top-color: $popover-arrow-outer-color;
-      border-bottom-width: 0;
-      &::after {
-        bottom: 1px;
-        margin-left: -$popover-arrow-width;
-        content: "";
-        border-top-color: $popover-arrow-color;
-        border-bottom-width: 0;
-      }
+    }
+
+    &::after {
+      bottom: -($popover-arrow-outer-width - 1);
+      margin-left: -$popover-arrow-width;
+      border-top-color: $popover-arrow-color;
     }
   }
 
   &.popover-right,
   &.bs-tether-element-attached-left {
     margin-left: $popover-arrow-width;
 
-    .popover-arrow {
+    &::before,
+    &::after {
       top: 50%;
+      border-left-width: 0;
+    }
+
+    &::before {
       left: -$popover-arrow-outer-width;
       margin-top: -$popover-arrow-outer-width;
       border-right-color: $popover-arrow-outer-color;
-      border-left-width: 0;
-      &::after {
-        bottom: -$popover-arrow-width;
-        left: 1px;
-        content: "";
-        border-right-color: $popover-arrow-color;
-        border-left-width: 0;
-      }
+    }
+
+    &::after {
+      left: -($popover-arrow-outer-width - 1);
+      margin-top: -($popover-arrow-outer-width - 1);
+      border-right-color: $popover-arrow-color;
     }
   }
 
   &.popover-bottom,
   &.bs-tether-element-attached-top {
     margin-top: $popover-arrow-width;
 
-    .popover-arrow {
-      top: -$popover-arrow-outer-width;
+    &::before,
+    &::after {
       left: 50%;
-      margin-left: -$popover-arrow-outer-width;
       border-top-width: 0;
+    }
+
+    &::before {
+      top: -$popover-arrow-outer-width;
+      margin-left: -$popover-arrow-outer-width;
       border-bottom-color: $popover-arrow-outer-color;
-      &::after {
-        top: 1px;
-        margin-left: -$popover-arrow-width;
-        content: "";
-        border-top-width: 0;
-        border-bottom-color: $popover-arrow-color;
-      }
+    }
+
+    &::after {
+      top: -($popover-arrow-outer-width - 1);
+      margin-left: -$popover-arrow-width;
+      border-bottom-color: $popover-title-bg;
+    }
+
+    // This will remove the popover-title's border just below the arrow
+    .popover-title::before {
+      position: absolute;
+      top: 0;
+      left: 50%;
+      display: block;
+      width: 20px;
+      margin-left: -10px;
+      content: "";
+      border-bottom: 1px solid $popover-title-bg;
     }
   }
 
   &.popover-left,
   &.bs-tether-element-attached-right {
     margin-left: -$popover-arrow-width;
 
-    .popover-arrow {
+    &::before,
+    &::after {
       top: 50%;
+      border-right-width: 0;
+    }
+
+    &::before {
       right: -$popover-arrow-outer-width;
       margin-top: -$popover-arrow-outer-width;
-      border-right-width: 0;
       border-left-color: $popover-arrow-outer-color;
-      &::after {
-        right: 1px;
-        bottom: -$popover-arrow-width;
-        content: "";
-        border-right-width: 0;
-        border-left-color: $popover-arrow-color;
-      }
+    }
+
+    &::after {
+      right: -($popover-arrow-outer-width - 1);
+      margin-top: -($popover-arrow-outer-width - 1);
+      border-left-color: $popover-arrow-color;
     }
   }
 }
@@ -120,21 +144,21 @@
 //
 // .popover-arrow is outer, .popover-arrow::after is inner
 
-.popover-arrow {
-  &,
-  &::after {
-    position: absolute;
-    display: block;
-    width: 0;
-    height: 0;
-    border-color: transparent;
-    border-style: solid;
-  }
+.popover::before,
+.popover::after {
+  position: absolute;
+  display: block;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
 }
-.popover-arrow {
+
+.popover::before {
+  content: "";
   border-width: $popover-arrow-outer-width;
 }
-.popover-arrow::after {
+.popover::after {
   content: "";
   border-width: $popover-arrow-width;
 }