diff --git a/js/src/tooltip.js b/js/src/tooltip.js index fb4ff131c4..c380f8675f 100644 --- a/js/src/tooltip.js +++ b/js/src/tooltip.js @@ -285,11 +285,8 @@ const Tooltip = (($) => { this._popper = new Popper(this.element, tip, { placement : attachment, - arrowElement : '.arrow', - modifiers : { - offset : { - offset : this.config.offset - } + offsets : { + popper : this.config.offset } }) @@ -632,13 +629,13 @@ const Tooltip = (($) => { return config } - _cleanTipClass() { - const $tip = $(this.getTipElement()) - const tabClass = $tip.attr('class').match(BSCLS_PREFIX_REGEX) - if (tabClass !== null && tabClass.length > 0) { - $tip.removeClass(tabClass.join('')) + _cleanTipClass() { + const $tip = $(this.getTipElement()) + const tabClass = $tip.attr('class').match(BSCLS_PREFIX_REGEX) + if (tabClass !== null && tabClass.length > 0) { + $tip.removeClass(tabClass.join('')) + } } - } // static diff --git a/js/tests/unit/tooltip.js b/js/tests/unit/tooltip.js index dc6364415a..0bb90156b9 100644 --- a/js/tests/unit/tooltip.js +++ b/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 = '' var $styles = $(styles).appendTo('head') var $container = $('
').appendTo('#qunit-fixture') - var $target = $('') + $('') .appendTo($container) .bootstrapTooltip({ - placement: 'right' + placement: 'right', + trigger: 'manual' + }) + .on('inserted.bs.tooltip', function () { + var $tooltip = $($(this).data('bs.tooltip').tip) + assert.ok($tooltip.hasClass('bs-tooltip-right')) + assert.ok($tooltip.attr('style') === undefined) + $(this).bootstrapTooltip('hide') + $container.remove() + $styles.remove() + done() }) .bootstrapTooltip('show') - - var $tooltip = $($target.data('bs.tooltip').tip) - - // this is some dumb hack stuff because sub pixels in firefox - 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() }) 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 = '' - var $styles = $(styles).appendTo('head') - - $('#qunit-fixture').append( - '
' - + ' ' - + ' ' - + ' ' - + '
') - 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 () { diff --git a/js/tests/visual/tooltip.html b/js/tests/visual/tooltip.html index c646c2c56c..9fbd196b6f 100644 --- a/js/tests/visual/tooltip.html +++ b/js/tests/visual/tooltip.html @@ -30,6 +30,9 @@ + + +

diff --git a/scss/_popover.scss b/scss/_popover.scss index c259916d76..d763039ff3 100644 --- a/scss/_popover.scss +++ b/scss/_popover.scss @@ -21,69 +21,66 @@ // Popover directions - &.popover-top, - &.bs-tether-element-attached-bottom { - margin-top: -$popover-arrow-width; + &.bs-popover-top { + margin-bottom: $popover-arrow-width; - &::before, - &::after { + ::before, + ::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-tether-element-attached-left { + &.bs-popover-right { margin-left: $popover-arrow-width; - &::before, - &::after { + ::before, + ::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-tether-element-attached-top { + &.bs-popover-bottom { margin-top: $popover-arrow-width; - &::before, - &::after { + ::before, + ::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-tether-element-attached-right { - margin-left: -$popover-arrow-width; + &.bs-popover-left { + margin-right: $popover-arrow-width; - &::before, - &::after { + ::before, + ::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, -.popover::after { +.arrow::before, +.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; } diff --git a/scss/_tooltip.scss b/scss/_tooltip.scss index 24e198d464..4006b46d96 100644 --- a/scss/_tooltip.scss +++ b/scss/_tooltip.scss @@ -13,12 +13,11 @@ &.show { opacity: $tooltip-opacity; } - &.tooltip-top, - &.bs-tether-element-attached-bottom { + &.bs-tooltip-top { 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-tether-element-attached-left { + &.bs-tooltip-right { 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-tether-element-attached-top { + &.bs-tooltip-bottom { 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-tether-element-attached-right { + &.bs-tooltip-left { 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;