Convert tooltip's arrows to generated CSS content via :before

diff --git a/js/src/tooltip.js b/js/src/tooltip.js
index aa5c739457619a93128b4c378449fa159621cdd6..099a47482981494d1c597afe0018e9823943f24f 100644 (file)
--- a/js/src/tooltip.js
+++ b/js/src/tooltip.js
@@ -28,7 +28,6 @@ const Tooltip = (($) => {
   const Default = {
     animation   : true,
     template    : '<div class="tooltip" role="tooltip">'
-                + '<div class="tooltip-arrow"></div>'
                 + '<div class="tooltip-inner"></div></div>',
     trigger     : 'hover focus',
     title       : '',

diff --git a/scss/_tooltip.scss b/scss/_tooltip.scss
index 941579ec975447bfeb08c8ef43942218e34a7626..23a18e7deeb8fd04ebab23c9f05c274e15584b27 100644 (file)
--- a/scss/_tooltip.scss
+++ b/scss/_tooltip.scss
@@ -16,10 +16,11 @@
     padding: $tooltip-arrow-width 0;
     margin-top: -3px;
 
-    .tooltip-arrow {
+    .tooltip-inner:before {
       bottom: 0;
       left: 50%;
       margin-left: -$tooltip-arrow-width;
+      content: "";
       border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
       border-top-color: $tooltip-arrow-color;
     }
@@ -29,10 +30,11 @@
     padding: 0 $tooltip-arrow-width;
     margin-left: 3px;
 
-    .tooltip-arrow {
+    .tooltip-inner:before {
       top: 50%;
       left: 0;
       margin-top: -$tooltip-arrow-width;
+      content: "";
       border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0;
       border-right-color: $tooltip-arrow-color;
     }
@@ -42,10 +44,11 @@
     padding: $tooltip-arrow-width 0;
     margin-top: 3px;
 
-    .tooltip-arrow {
+    .tooltip-inner:before {
       top: 0;
       left: 50%;
       margin-left: -$tooltip-arrow-width;
+      content: "";
       border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
       border-bottom-color: $tooltip-arrow-color;
     }
@@ -55,10 +58,11 @@
     padding: 0 $tooltip-arrow-width;
     margin-left: -3px;
 
-    .tooltip-arrow {
+    .tooltip-inner:before {
       top: 50%;
       right: 0;
       margin-top: -$tooltip-arrow-width;
+      content: "";
       border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width;
       border-left-color: $tooltip-arrow-color;
     }
@@ -73,13 +77,12 @@
   text-align: center;
   background-color: $tooltip-bg;
   @include border-radius($border-radius);
-}
 
-// Arrows
-.tooltip-arrow {
-  position: absolute;
-  width: 0;
-  height: 0;
-  border-color: transparent;
-  border-style: solid;
+  &:before {
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-color: transparent;
+    border-style: solid;
+  }
 }