From 2ae5fdf9ddbff98c55e47b81d7150b8d960ad342 Mon Sep 17 00:00:00 2001
From: Bernardo Gurgel Filho <bernardogfilho@gmail.com>
Date: Sun, 23 Aug 2015 01:59:48 -0300
Subject: [PATCH] Convert tooltip's arrows to generated CSS content via :before

---
 js/src/tooltip.js  |  1 -
 scss/_tooltip.scss | 27 +++++++++++++++------------
 2 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/js/src/tooltip.js b/js/src/tooltip.js
index aa5c739457..099a474829 100644
--- 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 941579ec97..23a18e7dee 100644
--- 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;
+  }
 }