Use consistent arrow class (#28105)

diff --git a/js/src/popover.js b/js/src/popover.js
index 36640407b72ecbe34060f9347d290dd190b62962..ce5edcd5c4df5262cfa04ba3d893954c26023ce0 100644 (file)
--- a/js/src/popover.js
+++ b/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>'
 }

diff --git a/js/src/tooltip.js b/js/src/tooltip.js
index 43c11aa1d92abba5af586effd2e62c03b7756fb1..8c2dbe7b2354ac098a0a798bb8a08ea7cb20a24a 100644 (file)
--- a/js/src/tooltip.js
+++ b/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

diff --git a/js/tests/unit/popover.js b/js/tests/unit/popover.js
index 9f267894d2bfad760a0470e7b7ea2f649471da08..bc94a179784f45737ba9c28abc3ae51d24cc080b 100644 (file)
--- a/js/tests/unit/popover.js
+++ b/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')

diff --git a/scss/_popover.scss b/scss/_popover.scss
index f205e66818cff53deaf6a02a537e71b827a7626e..fe70dd071fe70e9af6a894ef6f32ef56151dd571 100644 (file)
--- a/scss/_popover.scss
+++ b/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;

diff --git a/scss/_tooltip.scss b/scss/_tooltip.scss
index 6b3aa62dd619bad73540ede3459a4db91d31c7a6..4d405e0319bd2c84bd970ec7b641f88525701a56 100644 (file)
--- a/scss/_tooltip.scss
+++ b/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;

diff --git a/site/docs/4.3/components/popovers.md b/site/docs/4.3/components/popovers.md
index d648c64753624617ee53c8c04e693e49e327c980..3dd14a52e5e57fdfbf30a3278e64d7ef432434bd 100644 (file)
--- a/site/docs/4.3/components/popovers.md
+++ b/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>

diff --git a/site/docs/4.3/components/tooltips.md b/site/docs/4.3/components/tooltips.md
index 2fe90a671326b43ff125d4d1dd900f1826c60955..3ddd0e06ab7ee591bf0fdf285d744ba315a56af5 100644 (file)
--- a/site/docs/4.3/components/tooltips.md
+++ b/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>