Use consistent arrow class (#28105)

Author: peterblazejewicz

js/src/popover.js

@@ -29,7 +29,7 @@ const Default = {
   trigger   : 'click',
   content   : '',
   template  : '<div class="popover" role="tooltip">' +
-              '<div class="arrow"></div>' +
+              '<div class="popover-arrow"></div>' +
               '<h3 class="popover-header"></h3>' +
               '<div class="popover-body"></div></div>'
 }

js/src/tooltip.js

@@ -60,7 +60,7 @@ const AttachmentMap = {
 const Default = {
   animation         : true,
   template          : '<div class="tooltip" role="tooltip">' +
-                    '<div class="arrow"></div>' +
+                    '<div class="tooltip-arrow"></div>' +
                     '<div class="tooltip-inner"></div></div>',
   trigger           : 'hover focus',
   title             : '',
@@ -103,7 +103,7 @@ const ClassName = {
 const Selector = {
   TOOLTIP       : '.tooltip',
   TOOLTIP_INNER : '.tooltip-inner',
-  ARROW         : '.arrow'
+  TOOLTIP_ARROW : '.tooltip-arrow'
 }
 
 const Trigger = {
@@ -302,7 +302,7 @@ class Tooltip {
             behavior: this.config.fallbackPlacement
           },
           arrow: {
-            element: Selector.ARROW
+            element: Selector.TOOLTIP_ARROW
           },
           preventOverflow: {
             boundariesElement: this.config.boundary

js/tests/unit/popover.js

@@ -239,7 +239,7 @@ $(function () {
       .bootstrapPopover({
         title: 'Test',
         content: 'Test',
-        template: '<div class="popover foobar"><div class="arrow"></div><div class="inner"><h3 class="title"/><div class="content"><p/></div></div></div>'
+        template: '<div class="popover foobar"><div class="popover-arrow"></div><div class="inner"><h3 class="title"/><div class="content"><p/></div></div></div>'
       })
       .one('shown.bs.popover', function () {
         assert.notEqual($('.popover').length, 0, 'popover was inserted')

scss/_popover.scss

@@ -17,7 +17,7 @@
   @include border-radius($popover-border-radius);
   @include box-shadow($popover-box-shadow);
 
-  .arrow {
+  .popover-arrow {
     position: absolute;
     display: block;
     width: $popover-arrow-width;
@@ -38,7 +38,7 @@
 .bs-popover-top {
   margin-bottom: $popover-arrow-height;
 
-  > .arrow {
+  > .popover-arrow {
     bottom: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
 
     &::before {
@@ -58,7 +58,7 @@
 .bs-popover-right {
   margin-left: $popover-arrow-height;
 
-  > .arrow {
+  > .popover-arrow {
     left: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
     width: $popover-arrow-height;
     height: $popover-arrow-width;
@@ -81,7 +81,7 @@
 .bs-popover-bottom {
   margin-top: $popover-arrow-height;
 
-  > .arrow {
+  > .popover-arrow {
     top: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
 
     &::before {
@@ -113,7 +113,7 @@
 .bs-popover-left {
   margin-right: $popover-arrow-height;
 
-  > .arrow {
+  > .popover-arrow {
     right: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
     width: $popover-arrow-height;
     height: $popover-arrow-width;

scss/_tooltip.scss

@@ -14,7 +14,7 @@
 
   &.show { opacity: $tooltip-opacity; }
 
-  .arrow {
+  .tooltip-arrow {
     position: absolute;
     display: block;
     width: $tooltip-arrow-width;
@@ -32,7 +32,7 @@
 .bs-tooltip-top {
   padding: $tooltip-arrow-height 0;
 
-  .arrow {
+  .tooltip-arrow {
     bottom: 0;
 
     &::before {
@@ -46,7 +46,7 @@
 .bs-tooltip-right {
   padding: 0 $tooltip-arrow-height;
 
-  .arrow {
+  .tooltip-arrow {
     left: 0;
     width: $tooltip-arrow-height;
     height: $tooltip-arrow-width;
@@ -62,7 +62,7 @@
 .bs-tooltip-bottom {
   padding: $tooltip-arrow-height 0;
 
-  .arrow {
+  .tooltip-arrow {
     top: 0;
 
     &::before {
@@ -76,7 +76,7 @@
 .bs-tooltip-left {
   padding: 0 $tooltip-arrow-height;
 
-  .arrow {
+  .tooltip-arrow {
     right: 0;
     width: $tooltip-arrow-height;
     height: $tooltip-arrow-width;

site/docs/4.3/components/popovers.md

@@ -212,12 +212,12 @@ Note that for security reasons the `sanitize`, `sanitizeFn` and `whiteList` opti
     <tr>
       <td>template</td>
       <td>string</td>
-      <td><code>'&lt;div class="popover" role="tooltip"&gt;&lt;div class="arrow"&gt;&lt;/div&gt;&lt;h3 class="popover-header"&gt;&lt;/h3&gt;&lt;div class="popover-body"&gt;&lt;/div&gt;&lt;/div&gt;'</code></td>
+      <td><code>'&lt;div class="popover" role="tooltip"&gt;&lt;div class="popover-arrow"&gt;&lt;/div&gt;&lt;h3 class="popover-header"&gt;&lt;/h3&gt;&lt;div class="popover-body"&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-header</code>.</p>
         <p>The popover's <code>content</code> will be injected into the <code>.popover-body</code>.</p>
-        <p><code>.arrow</code> will become the popover's arrow.</p>
+        <p><code>.popover-arrow</code> will become the popover's arrow.</p>
         <p>The outermost wrapper element should have the <code>.popover</code> class.</p>
       </td>
     </tr>

site/docs/4.3/components/tooltips.md

@@ -119,7 +119,7 @@ Additionally, do not rely solely on `hover` as the trigger for your tooltip, as
 
 <!-- Generated markup by the plugin -->
 <div class="tooltip bs-tooltip-top" role="tooltip">
-  <div class="arrow"></div>
+  <div class="tooltip-arrow"></div>
   <div class="tooltip-inner">
     Some tooltip text!
   </div>
@@ -210,11 +210,11 @@ Note that for security reasons the `sanitize`, `sanitizeFn` and `whiteList` opti
     <tr>
       <td>template</td>
       <td>string</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><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>
         <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>.arrow</code> will become the tooltip's arrow.</p>
+        <p><code>.tooltip-arrow</code> will become the tooltip's arrow.</p>
         <p>The outermost wrapper element should have the <code>.tooltip</code> class and <code>role="tooltip"</code>.</p>
       </td>
     </tr>