Force tooltip and popover to recreate content every time it opens (#35679)

js/src/tooltip.js

@@ -115,6 +115,7 @@ class Tooltip extends BaseComponent {
     this._activeTrigger = {}
     this._popper = null
     this._templateFactory = null
+    this._newContent = null
 
     // Protected
     this.tip = null
@@ -205,6 +206,12 @@ class Tooltip extends BaseComponent {
       return
     }
 
+    // todo v6 remove this OR make it optional
+    if (this.tip) {
+      this.tip.remove()
+      this.tip = null
+    }
+
     const tip = this._getTipElement()
 
     this._element.setAttribute('aria-describedby', tip.getAttribute('id'))
@@ -219,7 +226,7 @@ class Tooltip extends BaseComponent {
     if (this._popper) {
       this._popper.update()
     } else {
-      this._createPopper(tip)
+      this._popper = this._createPopper(tip)
     }
 
     tip.classList.add(CLASS_NAME_SHOW)
@@ -305,7 +312,7 @@ class Tooltip extends BaseComponent {
 
   _getTipElement() {
     if (!this.tip) {
-      this.tip = this._createTipElement(this._getContentForTemplate())
+      this.tip = this._createTipElement(this._newContent || this._getContentForTemplate())
     }
 
     return this.tip
@@ -335,17 +342,11 @@ class Tooltip extends BaseComponent {
   }
 
   setContent(content) {
-    let isShown = false
+    this._newContent = content
-    if (this.tip) {
+    if (this._isShown()) {
-      isShown = this._isShown()
       this.tip.remove()
       this.tip = null
-    }
-
       this._disposePopper()
-    this.tip = this._createTipElement(content)
-
-    if (isShown) {
       this.show()
     }
   }
@@ -373,7 +374,7 @@ class Tooltip extends BaseComponent {
   }
 
   _getTitle() {
-    return this._config.title
+    return this._resolvePossibleFunction(this._config.title) || this._config.originalTitle
   }
 
   // Private
@@ -394,7 +395,7 @@ class Tooltip extends BaseComponent {
       this._config.placement.call(this, tip, this._element) :
       this._config.placement
     const attachment = AttachmentMap[placement.toUpperCase()]
-    this._popper = Popper.createPopper(this._element, tip, this._getPopperConfig(attachment))
+    return Popper.createPopper(this._element, tip, this._getPopperConfig(attachment))
   }
 
   _getOffset() {
@@ -592,7 +593,6 @@ class Tooltip extends BaseComponent {
     }
 
     config.originalTitle = this._element.getAttribute('title') || ''
-    config.title = this._resolvePossibleFunction(config.title) || config.originalTitle
     if (typeof config.title === 'number') {
       config.title = config.title.toString()
     }

js/tests/unit/tooltip.spec.js

@@ -185,7 +185,7 @@ describe('Tooltip', () => {
       const tooltipEl = fixtureEl.querySelector('a')
       const tooltip = new Tooltip(tooltipEl)
 
-      expect(tooltip._config.title).toEqual('Another tooltip')
+      expect(tooltip._getTitle()).toEqual('Another tooltip')
     })
   })
 
@@ -848,7 +848,7 @@ describe('Tooltip', () => {
           }, 100)
 
           setTimeout(() => {
-            expect(insertedFunc).toHaveBeenCalledTimes(1)
+            expect(insertedFunc).toHaveBeenCalledTimes(2)
             resolve()
           }, 200)
         }, 0)
@@ -1166,6 +1166,7 @@ describe('Tooltip', () => {
       tooltip.setContent({ '.tooltip-inner': 'foo' })
 
       expect(tip()).not.toHaveClass('show')
+      tooltip.show()
       expect(tip().querySelector('.tooltip-inner').textContent).toEqual('foo')
     })
 
@@ -1229,6 +1230,7 @@ describe('Tooltip', () => {
       })
 
       tooltip.setContent({ '.tooltip': { 0: childContent, jquery: 'jQuery' } })
+      tooltip.show()
 
       expect(childContent.parentNode).toEqual(tooltip._getTipElement())
     })