]> git.ipfire.org Git - thirdparty/bootstrap.git/commitdiff
fix regression about using element for tooltip container option
authorJohann-S <johann.servoire@gmail.com>
Wed, 5 Dec 2018 09:25:00 +0000 (10:25 +0100)
committerJohann-S <johann.servoire@gmail.com>
Wed, 5 Dec 2018 09:57:02 +0000 (10:57 +0100)
js/src/tooltip.js
js/tests/unit/tooltip.js
js/tests/visual/tooltip.html

index f428a79ebdc7f76c6bb43b169f1b1a5473f741f4..1c40dfed341973ecb4a209135515fcd9e453aa9e 100644 (file)
@@ -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()]
   }
index 7652d4cf869c79891dfef3166aa38e8abbad483e..289f8aebff512e2e4b60653deaa72b780127a808 100644 (file)
@@ -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()
index 8759f3dcda8f21eeb6ee6dc2cd438062470b97d9..436f5c1cd8b0e2e6e771f2886416041613dfd16c 100644 (file)
           <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'