Merge branch 'v4-dev' into v4-docs-streamlined

docs/4.0/components/popovers.md

@@ -51,7 +51,7 @@ Four options are available: top, right, bottom, and left aligned.
 
 <div class="bd-example bd-example-popover-static">
   <div class="popover bs-popover-top bs-popover-top-docs">
-    <div class="arrow" x-arrow></div>
+    <div class="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>
@@ -59,7 +59,7 @@ Four options are available: top, right, bottom, and left aligned.
   </div>
 
   <div class="popover bs-popover-right bs-popover-right-docs">
-    <div class="arrow" x-arrow></div>
+    <div class="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>
@@ -67,7 +67,7 @@ Four options are available: top, right, bottom, and left aligned.
   </div>
 
   <div class="popover bs-popover-bottom bs-popover-bottom-docs">
-    <div class="arrow" x-arrow></div>
+    <div class="arrow"></div>
     <h3 class="popover-title">Popover bottom</h3>
     <div class="popover-content">
       <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
@@ -75,7 +75,7 @@ Four options are available: top, right, bottom, and left aligned.
   </div>
 
   <div class="popover bs-popover-left bs-popover-left-docs">
-    <div class="arrow" x-arrow></div>
+    <div class="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>
@@ -228,7 +228,7 @@ 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" x-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>

docs/4.0/components/tooltips.md

@@ -46,25 +46,25 @@ Four options are available: top, right, bottom, and left aligned.
 
 <div class="bd-example bd-example-tooltip-static">
   <div class="tooltip bs-tooltip-top bs-tooltip-top-docs" role="tooltip">
-    <div class="arrow" x-arrow></div>
+    <div class="arrow"></div>
     <div class="tooltip-inner">
       Tooltip on the top
     </div>
   </div>
   <div class="tooltip bs-tooltip-right bs-tooltip-right-docs" role="tooltip">
-    <div class="arrow" x-arrow></div>
+    <div class="arrow"></div>
     <div class="tooltip-inner">
       Tooltip on the right
     </div>
   </div>
   <div class="tooltip bs-tooltip-bottom bs-tooltip-bottom-docs" role="tooltip">
-    <div class="arrow" x-arrow></div>
+    <div class="arrow"></div>
     <div class="tooltip-inner">
       Tooltip on the bottom
     </div>
   </div>
   <div class="tooltip bs-tooltip-left bs-tooltip-left-docs" role="tooltip">
-    <div class="arrow" x-arrow></div>
+    <div class="arrow"></div>
     <div class="tooltip-inner">
       Tooltip on the left
     </div>
@@ -134,7 +134,7 @@ You should only add tooltips to HTML elements that are traditionally keyboard-fo
 
 <!-- Generated markup by the plugin -->
 <div class="tooltip bs-tooltip-top" role="tooltip">
-  <div class="arrow" x-arrow></div>
+  <div class="arrow"></div>
   <div class="tooltip-inner">
     Some tooltip text!
   </div>
@@ -207,7 +207,7 @@ 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="arrow" x-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>

js/src/popover.js

@@ -30,7 +30,7 @@ const Popover = (($) => {
     trigger   : 'click',
     content   : '',
     template  : '<div class="popover" role="tooltip">'
-              + '<div class="arrow" x-arrow></div>'
+              + '<div class="arrow"></div>'
               + '<h3 class="popover-title"></h3>'
               + '<div class="popover-content"></div></div>'
   })

js/src/tooltip.js

@@ -61,7 +61,7 @@ const Tooltip = (($) => {
   const Default = {
     animation           : true,
     template            : '<div class="tooltip" role="tooltip">'
-                        + '<div class="arrow" x-arrow></div>'
+                        + '<div class="arrow"></div>'
                         + '<div class="tooltip-inner"></div></div>',
     trigger             : 'hover focus',
     title               : '',
@@ -99,7 +99,8 @@ const Tooltip = (($) => {
 
   const Selector = {
     TOOLTIP       : '.tooltip',
-    TOOLTIP_INNER : '.tooltip-inner'
+    TOOLTIP_INNER : '.tooltip-inner',
+    ARROW         : '.arrow'
   }
 
   const Trigger = {
@@ -288,16 +289,19 @@ const Tooltip = (($) => {
         $(this.element).trigger(this.constructor.Event.INSERTED)
 
         this._popper = new Popper(this.element, tip, {
-          placement : attachment,
-          modifiers : {
-            offset : {
-              offset : this.config.offset
+          placement: attachment,
+          modifiers: {
+            offset: {
+              offset: this.config.offset
             },
-            flip : {
-              behavior : this.config.fallbackPlacement
+            flip: {
+              behavior: this.config.fallbackPlacement
+            },
+            arrow: {
+              element: Selector.ARROW
             }
           },
-          onCreate : (data) => {
+          onCreate: (data) => {
             if (data.originalPlacement !== data.placement) {
               this._handlePopperPlacementChange(data)
             }

package.json

@@ -77,7 +77,7 @@
     "babel-cli": "^6.24.1",
     "babel-eslint": "^7.2.3",
     "babel-plugin-transform-es2015-modules-strip": "^0.1.1",
-    "babel-preset-es2015": "^7.0.0-alpha.7",
+    "babel-preset-es2015": "^6.24.1",
     "clean-css-cli": "^4.1.3",
     "eslint": "^3.19.0",
     "htmllint-cli": "^0.0.6",

scss/_variables.scss

@@ -677,7 +677,7 @@ $card-border-radius-inner: calc(#{$card-border-radius} - #{$card-border-width})
 $card-cap-bg:              $gray-lightest !default;
 $card-bg:                  $white !default;
 
-$card-link-hover-color:    $white !default;
+$card-inverse-link-hover-color:    $white !default;
 
 $card-img-overlay-padding: 1.25rem !default;
 

scss/mixins/_cards.scss

@@ -47,7 +47,7 @@
   }
   .card-link {
     @include hover-focus {
-      color: $card-link-hover-color;
+      color: $card-inverse-link-hover-color;
     }
   }
 }