Making .tooltip('show') throw an error on elements with display:none (#20940)

diff --git a/js/src/tooltip.js b/js/src/tooltip.js
index 6c23b9f9dde7168b7389552a1709ba5d0bc00c09..c4fdbff59c66dda508309908fbcc85a20cb0ab5e 100644 (file)
--- a/js/src/tooltip.js
+++ b/js/src/tooltip.js
@@ -239,6 +239,9 @@ const Tooltip = (($) => {
     }
 
     show() {
+      if ($(this.element).css('display') === 'none') {
+        throw new Error('Please use show on visible elements')
+      }
       let showEvent = $.Event(this.constructor.Event.SHOW)
 
       if (this.isWithContent() && this._isEnabled) {

diff --git a/js/tests/unit/popover.js b/js/tests/unit/popover.js
index 1808ff50aa6df940609846eba5eddcd85526b2de..6e47222f14ce9e8b7f9fb79237fa722af5927ce6 100644 (file)
--- a/js/tests/unit/popover.js
+++ b/js/tests/unit/popover.js
@@ -320,4 +320,16 @@ $(function () {
       .bootstrapPopover('show')
   })
 
+  QUnit.test('should throw an error when show is called on hidden elements', function (assert) {
+    assert.expect(1)
+    var done = assert.async()
+
+    try {
+      $('<div data-toggle="popover" data-title="some title" data-content="@Johann-S" style="display: none"/>').bootstrapPopover('show')
+    }
+    catch (err) {
+      assert.strictEqual(err.message, 'Please use show on visible elements')
+      done()
+    }
+  })
 })

diff --git a/js/tests/unit/tooltip.js b/js/tests/unit/tooltip.js
index de313ff953f90536704d91b8d21f273eff05f639..97c5855cb08aba99c2724af65c31185333c2e8bd 100644 (file)
--- a/js/tests/unit/tooltip.js
+++ b/js/tests/unit/tooltip.js
@@ -185,6 +185,19 @@ $(function () {
       .bootstrapTooltip('show')
   })
 
+  QUnit.test('should throw an error when show is called on hidden elements', function (assert) {
+    assert.expect(1)
+    var done = assert.async()
+
+    try {
+      $('<div title="tooltip title" style="display: none"/>').bootstrapTooltip('show')
+    }
+    catch (err) {
+      assert.strictEqual(err.message, 'Please use show on visible elements')
+      done()
+    }
+  })
+
   QUnit.test('should fire inserted event', function (assert) {
     assert.expect(2)
     var done = assert.async()