rename .arrow => .popover-arrow

docs/_includes/js/popovers.html

@@ -40,7 +40,7 @@ $(function () {
   <p>Four options are available: top, right, bottom, and left aligned.</p>
   <div class="bs-example bs-example-popover">
     <div class="popover top">
-      <div class="arrow"></div>
+      <div class="popover-arrow"></div>
       <h3 class="popover-title">Popover top</h3>
       <div class="popover-content">
         <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
@@ -48,7 +48,7 @@ $(function () {
     </div>
 
     <div class="popover right">
-      <div class="arrow"></div>
+      <div class="popover-arrow"></div>
       <h3 class="popover-title">Popover right</h3>
       <div class="popover-content">
         <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
@@ -56,7 +56,7 @@ $(function () {
     </div>
 
     <div class="popover bottom">
-      <div class="arrow"></div>
+      <div class="popover-arrow"></div>
       <h3 class="popover-title">Popover bottom</h3>
 
       <div class="popover-content">
@@ -65,7 +65,7 @@ $(function () {
     </div>
 
     <div class="popover left">
-      <div class="arrow"></div>
+      <div class="popover-arrow"></div>
       <h3 class="popover-title">Popover left</h3>
       <div class="popover-content">
         <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
@@ -207,12 +207,12 @@ sagittis lacus vel augue laoreet rutrum faucibus.">
         <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-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="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>
             <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>.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>

docs/javascript/popovers.md

@@ -44,7 +44,7 @@ Four options are available: top, right, bottom, and left aligned.
 
 <div class="bs-example bs-example-popover">
   <div class="popover top">
-    <div class="arrow"></div>
+    <div class="popover-arrow"></div>
     <h3 class="popover-title">Popover top</h3>
     <div class="popover-content">
       <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
@@ -52,7 +52,7 @@ Four options are available: top, right, bottom, and left aligned.
   </div>
 
   <div class="popover right">
-    <div class="arrow"></div>
+    <div class="popover-arrow"></div>
     <h3 class="popover-title">Popover right</h3>
     <div class="popover-content">
       <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
@@ -60,7 +60,7 @@ Four options are available: top, right, bottom, and left aligned.
   </div>
 
   <div class="popover bottom">
-    <div class="arrow"></div>
+    <div class="popover-arrow"></div>
     <h3 class="popover-title">Popover bottom</h3>
 
     <div class="popover-content">
@@ -69,7 +69,7 @@ Four options are available: top, right, bottom, and left aligned.
   </div>
 
   <div class="popover left">
-    <div class="arrow"></div>
+    <div class="popover-arrow"></div>
     <h3 class="popover-title">Popover left</h3>
     <div class="popover-content">
       <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
@@ -222,12 +222,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="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="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>
           <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>.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>

js/popover.js

@@ -25,7 +25,7 @@
     placement: 'right',
     trigger: 'click',
     content: '',
-    template: '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
+    template: '<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
   })
 
 
@@ -72,7 +72,7 @@
   }
 
   Popover.prototype.arrow = function () {
-    return (this.$arrow = this.$arrow || this.tip().find('.arrow'))
+    return (this.$arrow = this.$arrow || this.tip().find('.popover-arrow'))
   }
 
   Popover.prototype.tip = function () {

js/tests/unit/popover.js

@@ -141,7 +141,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>'
       })
 
     $popover.bootstrapPopover('show')

scss/_popover.scss

@@ -47,9 +47,9 @@
 
 // Arrows
 //
-// .arrow is outer, .arrow:after is inner
+// .popover-arrow is outer, .popover-arrow:after is inner
 
-.popover > .arrow {
+.popover > .popover-arrow {
   &,
   &:after {
     position: absolute;
@@ -60,16 +60,16 @@
     border-style: solid;
   }
 }
-.popover > .arrow {
+.popover > .popover-arrow {
   border-width: $popover-arrow-outer-width;
 }
-.popover > .arrow:after {
+.popover > .popover-arrow:after {
   content: "";
   border-width: $popover-arrow-width;
 }
 
 .popover {
-  &.top > .arrow {
+  &.top > .popover-arrow {
     bottom: -$popover-arrow-outer-width;
     left: 50%;
     margin-left: -$popover-arrow-outer-width;
@@ -83,7 +83,7 @@
       border-bottom-width: 0;
     }
   }
-  &.right > .arrow {
+  &.right > .popover-arrow {
     top: 50%;
     left: -$popover-arrow-outer-width;
     margin-top: -$popover-arrow-outer-width;
@@ -97,7 +97,7 @@
       border-left-width: 0;
     }
   }
-  &.bottom > .arrow {
+  &.bottom > .popover-arrow {
     top: -$popover-arrow-outer-width;
     left: 50%;
     margin-left: -$popover-arrow-outer-width;
@@ -112,7 +112,7 @@
     }
   }
 
-  &.left > .arrow {
+  &.left > .popover-arrow {
     top: 50%;
     right: -$popover-arrow-outer-width;
     margin-top: -$popover-arrow-outer-width;