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

5 files changed, 54 insertions, 56 deletions

diff --git a/docs/components/popovers.md b/docs/components/popovers.md
index 71d488fd4..9366ac1a1 100644
--- a/docs/components/popovers.md
+++ b/docs/components/popovers.md
@@ -231,12 +231,12 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
     <tr>
       <td>template</td>
       <td>string</td>
-      <td><code>'&lt;div class="popover" role="tooltip"&gt;&lt;div class="popover-arrow"&gt;&lt;/div&gt;&lt;h3 class="popover-title"&gt;&lt;/h3&gt;&lt;div class="popover-content"&gt;&lt;/div&gt;&lt;/div&gt;'</code></td>
+      <td><code>'&lt;div class="popover" role="tooltip"&gt;&lt;div class="arrow"&gt;&lt;/div&gt;&lt;h3 class="popover-title"&gt;&lt;/h3&gt;&lt;div class="popover-content"&gt;&lt;/div&gt;&lt;/div&gt;'</code></td>
       <td>
         <p>Base HTML to use when creating the popover.</p>
         <p>The popover's <code>title</code> will be injected into the <code>.popover-title</code>.</p>
         <p>The popover's <code>content</code> will be injected into the <code>.popover-content</code>.</p>
-        <p><code>.popover-arrow</code> will become the popover's arrow.</p>
+        <p><code>.arrow</code> will become the popover's arrow.</p>
         <p>The outermost wrapper element should have the <code>.popover</code> class.</p>
       </td>
     </tr>
diff --git a/docs/components/tooltips.md b/docs/components/tooltips.md
index e8a7ce96f..54f3c448f 100644
--- a/docs/components/tooltips.md
+++ b/docs/components/tooltips.md
@@ -136,7 +136,7 @@ You should only add tooltips to HTML elements that are traditionally keyboard-fo
 
 <!-- Generated markup by the plugin -->
 <div class="tooltip tooltip-top" role="tooltip">
-  <div class="tooltip-arrow"></div>
+  <div class="arrow"></div>
   <div class="tooltip-inner">
     Some tooltip text!
   </div>
@@ -209,11 +209,11 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
     <tr>
       <td>template</td>
       <td>string</td>
-      <td><code>'&lt;div class="tooltip" role="tooltip"&gt;&lt;div class="tooltip-arrow"&gt;&lt;/div&gt;&lt;div class="tooltip-inner"&gt;&lt;/div&gt;&lt;/div&gt;'</code></td>
+      <td><code>'&lt;div class="tooltip" role="tooltip"&gt;&lt;div class="arrow"&gt;&lt;/div&gt;&lt;div class="tooltip-inner"&gt;&lt;/div&gt;&lt;/div&gt;'</code></td>
       <td>
         <p>Base HTML to use when creating the tooltip.</p>
         <p>The tooltip's <code>title</code> will be injected into the <code>.tooltip-inner</code>.</p>
-        <p><code>.tooltip-arrow</code> will become the tooltip's arrow.</p>
+        <p><code>.arrow</code> will become the tooltip's arrow.</p>
         <p>The outermost wrapper element should have the <code>.tooltip</code> class.</p>
       </td>
     </tr>
diff --git a/js/src/tooltip.js b/js/src/tooltip.js
index b446d9bcc..a8c0ab6f1 100644
--- a/js/src/tooltip.js
+++ b/js/src/tooltip.js
@@ -289,7 +289,9 @@ const Tooltip = (($) => {
             }
           },
           onCreate : (data) => {
-            this._handlePopperPlacementChange(data)
+            if (data.originalPlacement !== data.placement) {
+              this._handlePopperPlacementChange(data)
+            }
           },
           onUpdate : (data) => {
             this._handlePopperPlacementChange(data)
@@ -644,10 +646,8 @@ const Tooltip = (($) => {
     }
 
     _handlePopperPlacementChange(data) {
-      if (data.originalPlacement !== data.placement) {
         this._cleanTipClass()
         this.addAttachmentClass(this._getAttachment(data.placement))
-      }
     }
 
     // static
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;
-  }
 }