diff options
| -rw-r--r-- | js/src/tooltip.js | 15 | ||||
| -rw-r--r-- | js/tests/unit/tooltip.js | 46 | ||||
| -rw-r--r-- | js/tests/visual/tooltip.html | 10 |
3 files changed, 67 insertions, 4 deletions
diff --git a/js/src/tooltip.js b/js/src/tooltip.js index f428a79ebd..1c40dfed34 100644 --- a/js/src/tooltip.js +++ b/js/src/tooltip.js @@ -272,8 +272,7 @@ class Tooltip { const attachment = this._getAttachment(placement) this.addAttachmentClass(attachment) - const container = this.config.container === false ? document.body : $(document).find(this.config.container) - + const container = this._getContainer() $(tip).data(this.constructor.DATA_KEY, this) if (!$.contains(this.element.ownerDocument.documentElement, this.tip)) { @@ -450,6 +449,18 @@ class Tooltip { // Private + _getContainer() { + if (this.config.container === false) { + return document.body + } + + if (Util.isElement(this.config.container)) { + return $(this.config.container) + } + + return $(document).find(this.config.container) + } + _getAttachment(placement) { return AttachmentMap[placement.toUpperCase()] } diff --git a/js/tests/unit/tooltip.js b/js/tests/unit/tooltip.js index 7652d4cf86..289f8aebff 100644 --- a/js/tests/unit/tooltip.js +++ b/js/tests/unit/tooltip.js @@ -414,6 +414,52 @@ $(function () { .bootstrapTooltip('show') }) + QUnit.test('should place tooltips inside a specific container when container is an element', function (assert) { + assert.expect(3) + var done = assert.async() + var $container = $('<div></div>').appendTo('#qunit-fixture') + var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>') + .appendTo('#qunit-fixture') + .bootstrapTooltip({ + container: $container[0] + }) + + $tooltip + .one('shown.bs.tooltip', function () { + assert.strictEqual($container.find('.tooltip').length, 1) + assert.strictEqual($('#qunit-fixture > .tooltip').length, 0, 'tooltip is not in parent') + $tooltip.bootstrapTooltip('hide') + }) + .one('hidden.bs.tooltip', function () { + assert.strictEqual($container.find('.tooltip').length, 0, 'tooltip was removed from dom') + done() + }) + .bootstrapTooltip('show') + }) + + QUnit.test('should place tooltips inside a specific container when container is a selector', function (assert) { + assert.expect(3) + var done = assert.async() + var $container = $('<div id="container"></div>').appendTo('#qunit-fixture') + var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>') + .appendTo('#qunit-fixture') + .bootstrapTooltip({ + container: '#container' + }) + + $tooltip + .one('shown.bs.tooltip', function () { + assert.strictEqual($container.find('.tooltip').length, 1) + assert.strictEqual($('#qunit-fixture > .tooltip').length, 0, 'tooltip is not in parent') + $tooltip.bootstrapTooltip('hide') + }) + .one('hidden.bs.tooltip', function () { + assert.strictEqual($container.find('.tooltip').length, 0, 'tooltip was removed from dom') + done() + }) + .bootstrapTooltip('show') + }) + QUnit.test('should add position class before positioning so that position-specific styles are taken into account', function (assert) { assert.expect(2) var done = assert.async() diff --git a/js/tests/visual/tooltip.html b/js/tests/visual/tooltip.html index 8759f3dcda..436f5c1cd8 100644 --- a/js/tests/visual/tooltip.html +++ b/js/tests/visual/tooltip.html @@ -51,8 +51,11 @@ <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip with XSS" data-container="<img src=1 onerror=alert(123) />"> Tooltip with XSS </button> - <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip with container" data-container="#customContainer"> - Tooltip with container + <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip with container (selector)" data-container="#customContainer"> + Tooltip with container (selector) + </button> + <button id="tooltipElement" type="button" class="btn btn-secondary" data-placement="left" title="Tooltip with container (element)"> + Tooltip with container (element) </button> <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 @@ -70,6 +73,9 @@ <script> $(function () { $('[data-toggle="tooltip"]').tooltip() + $('#tooltipElement').tooltip({ + container: $('#customContainer')[0] + }) $('#target').tooltip({ placement : 'top', trigger : 'manual' |