diff --git a/js/tests/unit/tooltip.js b/js/tests/unit/tooltip.js index fd02a5e7f2c20b0f57bbf5d9bd2f4ea8adf8f2f0..78ea7a81b5c40e8f51895c0a0edf077f9a734fee 100644 --- a/js/tests/unit/tooltip.js +++ b/js/tests/unit/tooltip.js @@ -827,6 +827,47 @@ $(function () { $circle.bootstrapTooltip('show') }) + test('should correctly determine auto placement based on container rather than parent', function () { + stop() + + var styles = '<style>' + + '.tooltip, .tooltip *, .tooltip *:before, .tooltip *:after { box-sizing: border-box; }' + + '.tooltip { position: absolute; display: block; font-size: 12px; line-height: 1.4; }' + + '.tooltip .tooltip-inner { max-width: 200px; padding: 3px 8px; font-family: Helvetica; text-align: center; }' + + '#trigger-parent {' + + ' position: fixed;' + + ' top: 100px;' + + ' right: 17px;' + + '}' + + '</style>' + var $styles = $(styles).appendTo('head') + + $('#qunit-fixture').append('<span id="trigger-parent"><a id="tt-trigger" title="If a_larger_text is written here, it won\'t fit using older broken version of BS">HOVER OVER ME</a></span>') + var $trigger = $('#tt-trigger') + + $trigger + .on('shown.bs.tooltip', function () { + var $tip = $('.tooltip-inner') + var tipXrightEdge = $tip.offset().left + $tip.width() + var triggerXleftEdge = $trigger.offset().left + ok(tipXrightEdge < triggerXleftEdge, 'tooltip with auto left placement, when near the right edge of the viewport, gets left placement') + $trigger.bootstrapTooltip('hide') + }) + .on('hidden.bs.tooltip', function () { + $styles.remove() + $(this).remove() + equal($('.tooltip').length, 0, 'tooltip removed from dom') + start() + }) + .bootstrapTooltip({ + container: 'body', + placement: 'auto left', + trigger: 'manual' + }) + + $trigger.bootstrapTooltip('show') + }) + test('should not reload the tooltip on subsequent mouseenter events', function () { var titleHtml = function () { var uid = $.fn.bootstrapTooltip.Constructor.prototype.getUID('tooltip') @@ -909,6 +950,7 @@ $(function () { .on('hidden.bs.tooltip', function () { $styles.remove() $(this).remove() + equal($('.tooltip').length, 0, 'tooltip removed from dom') start() }) .bootstrapTooltip({ diff --git a/js/tooltip.js b/js/tooltip.js index d0da83a5a965bd24abc14595c16d3c0a0104166a..55dedcef41f61c3029f1b2d8e3abc11759fea9df 100644 --- a/js/tooltip.js +++ b/js/tooltip.js @@ -188,13 +188,13 @@ if (autoPlace) { var orgPlacement = placement - var $parent = this.$element.parent() - var parentDim = this.getPosition($parent) + var $container = this.options.container ? $(this.options.container) : this.$element.parent() + var containerDim = this.getPosition($container) - placement = placement == 'bottom' && pos.top + pos.height + actualHeight - parentDim.scroll > parentDim.height ? 'top' : - placement == 'top' && pos.top - parentDim.scroll - actualHeight < parentDim.top ? 'bottom' : - placement == 'right' && pos.right + actualWidth > parentDim.width ? 'left' : - placement == 'left' && pos.left - actualWidth < parentDim.left ? 'right' : + placement = placement == 'bottom' && pos.top + pos.height + actualHeight - containerDim.scroll > containerDim.height ? 'top' : + placement == 'top' && pos.top - containerDim.scroll - actualHeight < containerDim.top ? 'bottom' : + placement == 'right' && pos.right + actualWidth > containerDim.width ? 'left' : + placement == 'left' && pos.left - actualWidth < containerDim.left ? 'right' : placement $tip