Fix arrow for tooltip and popover

js/src/tooltip.js

@@ -285,11 +285,8 @@ const Tooltip = (($) => {
 
         this._popper = new Popper(this.element, tip, {
           placement : attachment,
-          arrowElement : '.arrow',
+          offsets : {
-          modifiers : {
+            popper : this.config.offset
-            offset : {
-              offset : this.config.offset
-            }
           }
         })
 

js/tests/unit/tooltip.js

@@ -364,32 +364,31 @@ $(function () {
   })
 
   QUnit.test('should add position class before positioning so that position-specific styles are taken into account', function (assert) {
-    assert.expect(1)
+    assert.expect(2)
+    var done = assert.async()
     var styles = '<style>'
-      + '.tooltip.right { white-space: nowrap; }'
+      + '.bs-tooltip-right { white-space: nowrap; }'
-      + '.tooltip.right .tooltip-inner { max-width: none; }'
+      + '.bs-tooltip-right .tooltip-inner { max-width: none; }'
       + '</style>'
     var $styles = $(styles).appendTo('head')
 
     var $container = $('<div/>').appendTo('#qunit-fixture')
-    var $target = $('<a href="#" rel="tooltip" title="very very very very very very very very long tooltip in one line"/>')
+    $('<a href="#" rel="tooltip" title="very very very very very very very very long tooltip in one line"/>')
       .appendTo($container)
       .bootstrapTooltip({
-        placement: 'right'
+        placement: 'right',
+        trigger: 'manual'
       })
-      .bootstrapTooltip('show')
+      .on('inserted.bs.tooltip', function () {
-
+        var $tooltip = $($(this).data('bs.tooltip').tip)
-    var $tooltip = $($target.data('bs.tooltip').tip)
+        assert.ok($tooltip.hasClass('bs-tooltip-right'))
-
+        assert.ok($tooltip.attr('style') === undefined)
-    // this is some dumb hack stuff because sub pixels in firefox
+        $(this).bootstrapTooltip('hide')
-    var top = Math.round($target.offset().top + $target[0].offsetHeight / 2 - $tooltip[0].offsetHeight / 2)
-    var top2 = Math.round($tooltip.offset().top)
-    var topDiff = top - top2
-    assert.ok(topDiff <= 1 && topDiff >= -1)
-    $target.bootstrapTooltip('hide')
-
         $container.remove()
         $styles.remove()
+        done()
+      })
+      .bootstrapTooltip('show')
   })
 
   QUnit.test('should use title attribute for tooltip text', function (assert) {
@@ -476,6 +475,12 @@ $(function () {
       })
       .appendTo('#qunit-fixture')
 
+    $('#qunit-fixture').css({
+      position : 'relative',
+      top : '0px',
+      left : '0px'
+    })
+
     var $trigger = $container
       .find('a')
       .css('margin-top', 200)
@@ -489,6 +494,11 @@ $(function () {
 
     setTimeout(function () {
       assert.ok(Math.round($tooltip.offset().top + $tooltip.outerHeight()) <= Math.round($trigger.offset().top))
+      $('#qunit-fixture').css({
+        position : 'absolute',
+        top : '-10000px',
+        left : '-10000px'
+      })
       done()
     }, 0)
   })
@@ -629,45 +639,6 @@ $(function () {
     $tooltip.trigger('mouseenter')
   })
 
-  QUnit.test('should correctly position tooltips on SVG elements', function (assert) {
-    if (!window.SVGElement) {
-      // Skip IE8 since it doesn't support SVG
-      assert.expect(0)
-      return
-    }
-    assert.expect(2)
-
-    var done = assert.async()
-
-    var styles = '<style>'
-        + '.tooltip, .tooltip *, .tooltip *:before, .tooltip *:after { box-sizing: border-box; }'
-        + '.tooltip { position: absolute; }'
-        + '.tooltip .tooltip-inner { width: 24px; height: 24px; font-family: Helvetica; }'
-        + '</style>'
-    var $styles = $(styles).appendTo('head')
-
-    $('#qunit-fixture').append(
-        '<div style="position: fixed; top: 0; left: 0;">'
-      + '  <svg width="200" height="200">'
-      + '    <circle cx="100" cy="100" r="10" title="m" id="theCircle" />'
-      + '  </svg>'
-      + '</div>')
-    var $circle = $('#theCircle')
-
-    $circle
-      .on('shown.bs.tooltip', function () {
-        var offset = $('.tooltip').offset()
-        $styles.remove()
-        assert.ok(Math.abs(offset.left - 88) <= 1, 'tooltip has correct horizontal location')
-        $circle.bootstrapTooltip('hide')
-        assert.strictEqual($('.tooltip').length, 0, 'tooltip removed from dom')
-        done()
-      })
-      .bootstrapTooltip({ placement: 'top', trigger: 'manual' })
-
-    $circle.bootstrapTooltip('show')
-  })
-
   QUnit.test('should not reload the tooltip on subsequent mouseenter events', function (assert) {
     assert.expect(1)
     var titleHtml = function () {

js/tests/visual/tooltip.html

@@ -30,6 +30,9 @@
         <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
           Tooltip with HTML
         </button>
+        <svg width="30" height="20">
+          <circle cx="15" cy="10" r="10" fill="#62448F" data-toggle="tooltip" data-placement="top" title="Tooltip on SVG" />
+        </svg>
       </p>
     </div>
 

scss/_popover.scss

@@ -21,69 +21,66 @@
 
   // Popover directions
 
-  &.popover-top,
+  &.bs-popover-top {
-  &.bs-tether-element-attached-bottom {
+    margin-bottom: $popover-arrow-width;
-    margin-top: -$popover-arrow-width;
 
-    &::before,
+    ::before,
-    &::after {
+    ::after {
       left: 50%;
       border-bottom-width: 0;
     }
 
-    &::before {
+    ::before {
       bottom: -$popover-arrow-outer-width;
       margin-left: -$popover-arrow-outer-width;
       border-top-color: $popover-arrow-outer-color;
     }
 
-    &::after {
+    ::after {
       bottom: -($popover-arrow-outer-width - 1);
       margin-left: -$popover-arrow-width;
       border-top-color: $popover-arrow-color;
     }
   }
 
-  &.popover-right,
+  &.bs-popover-right {
-  &.bs-tether-element-attached-left {
     margin-left: $popover-arrow-width;
 
-    &::before,
+    ::before,
-    &::after {
+    ::after {
       top: 50%;
       border-left-width: 0;
     }
 
-    &::before {
+    ::before {
       left: -$popover-arrow-outer-width;
       margin-top: -$popover-arrow-outer-width;
       border-right-color: $popover-arrow-outer-color;
     }
 
-    &::after {
+    ::after {
       left: -($popover-arrow-outer-width - 1);
       margin-top: -($popover-arrow-outer-width - 1);
       border-right-color: $popover-arrow-color;
     }
   }
 
-  &.popover-bottom,
+  &.bs-popover-bottom {
-  &.bs-tether-element-attached-top {
     margin-top: $popover-arrow-width;
 
-    &::before,
+    ::before,
-    &::after {
+    ::after {
       left: 50%;
       border-top-width: 0;
     }
 
-    &::before {
+    ::before {
       top: -$popover-arrow-outer-width;
       margin-left: -$popover-arrow-outer-width;
       border-bottom-color: $popover-arrow-outer-color;
     }
 
-    &::after {
+    ::after {
       top: -($popover-arrow-outer-width - 1);
       margin-left: -$popover-arrow-width;
       border-bottom-color: $popover-arrow-color;
@@ -102,23 +99,22 @@
     }
   }
 
-  &.popover-left,
+  &.bs-popover-left {
-  &.bs-tether-element-attached-right {
+    margin-right: $popover-arrow-width;
-    margin-left: -$popover-arrow-width;
 
-    &::before,
+    ::before,
-    &::after {
+    ::after {
       top: 50%;
       border-right-width: 0;
     }
 
-    &::before {
+    ::before {
       right: -$popover-arrow-outer-width;
       margin-top: -$popover-arrow-outer-width;
       border-left-color: $popover-arrow-outer-color;
     }
 
-    &::after {
+    ::after {
       right: -($popover-arrow-outer-width - 1);
       margin-top: -($popover-arrow-outer-width - 1);
       border-left-color: $popover-arrow-color;
@@ -153,8 +149,8 @@
 //
 // .popover-arrow is outer, .popover-arrow::after is inner
 
-.popover::before,
+.arrow::before,
-.popover::after {
+.arrow::after {
   position: absolute;
   display: block;
   width: 0;
@@ -163,11 +159,11 @@
   border-style: solid;
 }
 
-.popover::before {
+.arrow::before {
   content: "";
   border-width: $popover-arrow-outer-width;
 }
-.popover::after {
+.arrow::after {
   content: "";
   border-width: $popover-arrow-width;
 }

scss/_tooltip.scss

@@ -13,12 +13,11 @@
 
   &.show { opacity: $tooltip-opacity; }
 
-  &.tooltip-top,
+  &.bs-tooltip-top {
-  &.bs-tether-element-attached-bottom {
     padding: $tooltip-arrow-width 0;
     margin-top: -$tooltip-margin;
 
-    .tooltip-inner::before {
+    .arrow::before {
       bottom: 0;
       left: 50%;
       margin-left: -$tooltip-arrow-width;
@@ -27,12 +26,11 @@
       border-top-color: $tooltip-arrow-color;
     }
   }
-  &.tooltip-right,
+  &.bs-tooltip-right {
-  &.bs-tether-element-attached-left {
     padding: 0 $tooltip-arrow-width;
     margin-left: $tooltip-margin;
 
-    .tooltip-inner::before {
+    .arrow::before {
       top: 50%;
       left: 0;
       margin-top: -$tooltip-arrow-width;
@@ -41,12 +39,11 @@
       border-right-color: $tooltip-arrow-color;
     }
   }
-  &.tooltip-bottom,
+  &.bs-tooltip-bottom {
-  &.bs-tether-element-attached-top {
     padding: $tooltip-arrow-width 0;
     margin-top: $tooltip-margin;
 
-    .tooltip-inner::before {
+    .arrow::before {
       top: 0;
       left: 50%;
       margin-left: -$tooltip-arrow-width;
@@ -55,12 +52,11 @@
       border-bottom-color: $tooltip-arrow-color;
     }
   }
-  &.tooltip-left,
+  &.bs-tooltip-left {
-  &.bs-tether-element-attached-right {
     padding: 0 $tooltip-arrow-width;
     margin-left: -$tooltip-margin;
 
-    .tooltip-inner::before {
+    .arrow::before {
       top: 50%;
       right: 0;
       margin-top: -$tooltip-arrow-width;
@@ -80,7 +76,7 @@
   background-color: $tooltip-bg;
   @include border-radius($border-radius);
 
-  &::before {
+  .arrow::before {
     position: absolute;
     width: 0;
     height: 0;