Fix setContent

Remove 'data-bs-original-title' trick fix class selector on `_popperConfig`
twbs · Aug 31, 2021 · e85e54f · e85e54f
1 parent 7508542
commit e85e54f
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 28 deletions.
diff --git a/js/src/tooltip.js b/js/src/tooltip.js
@@ -99,6 +99,7 @@ const HOVER_STATE_SHOW = 'show'
 const HOVER_STATE_OUT = 'out'
 
 const SELECTOR_TOOLTIP_INNER = '.tooltip-inner'
+const SELECTOR_TOOLTIP_ARROW = '.tooltip-arrow'
 const SELECTOR_MODAL = `.${CLASS_NAME_MODAL}`
 
 const EVENT_MODAL_HIDE = 'hide.bs.modal'
@@ -203,10 +204,7 @@ class Tooltip extends BaseComponent {
       this.tip.remove()
     }
 
-    if (this._popper) {
-      this._popper.destroy()
-    }
-
+    this._popperDestroy()
     super.dispose()
   }
 
@@ -306,10 +304,7 @@ class Tooltip extends BaseComponent {
       this._element.removeAttribute('aria-describedby')
       EventHandler.trigger(this._element, this.constructor.Event.HIDDEN)
 
-      if (this._popper) {
-        this._popper.destroy()
-        this._popper = null
-      }
+      this._popperDestroy()
     }
 
     const hideEvent = EventHandler.trigger(this._element, this.constructor.Event.HIDE)
@@ -362,7 +357,19 @@ class Tooltip extends BaseComponent {
   }
 
   setContent(content) {
+    let isShown = false
+    if (this.tip) {
+      isShown = this.tip.classList.contains(CLASS_NAME_SHOW)
+      this.tip.remove()
+    }
+
+    this._popperDestroy()
+
     this.tip = this._getTemplateFactory(content).toHtml()
+
+    if (isShown) {
+      this.show()
+    }
   }
 
   _getTemplateFactory(content) {
@@ -391,9 +398,7 @@ class Tooltip extends BaseComponent {
   }
 
   getTitle() {
-    const title = this._element.getAttribute('data-bs-original-title') || this._config.title
-
-    return this._resolvePossibleFunction(title)
+    return this._resolvePossibleFunction(this._config.title) || this._element.getAttribute('title')
   }
 
   updateAttachment(attachment) {
@@ -457,7 +462,7 @@ class Tooltip extends BaseComponent {
         {
           name: 'arrow',
           options: {
-            element: `.${this.constructor.NAME}-arrow`
+            element: SELECTOR_TOOLTIP_ARROW
           }
         },
         {
@@ -528,15 +533,9 @@ class Tooltip extends BaseComponent {
 
   _fixTitle() {
     const title = this._element.getAttribute('title')
-    const originalTitleType = typeof this._element.getAttribute('data-bs-original-title')
-
-    if (title || originalTitleType !== 'string') {
-      this._element.setAttribute('data-bs-original-title', title || '')
-      if (title && !this._element.getAttribute('aria-label') && !this._element.textContent) {
-        this._element.setAttribute('aria-label', title)
-      }
 
-      this._element.setAttribute('title', '')
+    if (title && !this._element.getAttribute('aria-label') && !this._element.textContent) {
+      this._element.setAttribute('aria-label', title)
     }
   }
 
@@ -686,6 +685,13 @@ class Tooltip extends BaseComponent {
     this._addAttachmentClass(this._getAttachment(state.placement))
   }
 
+  _popperDestroy() {
+    if (this._popper) {
+      this._popper.destroy()
+      this._popper = null
+    }
+  }
+
   // Static
 
   static jQueryInterface(config) {

diff --git a/site/assets/js/application.js b/site/assets/js/application.js
@@ -145,10 +145,10 @@
   clipboard.on('success', function (e) {
     var tooltipBtn = bootstrap.Tooltip.getInstance(e.trigger)
 
-    e.trigger.setAttribute('data-bs-original-title', 'Copied!')
-    tooltipBtn.show()
-
-    e.trigger.setAttribute('data-bs-original-title', 'Copy to clipboard')
+    tooltipBtn.setContent({ '.tooltip-inner': 'Copied!' })
+    e.trigger.addEventListener('hidden.bs.tooltip', function () {
+      tooltipBtn.setContent({ '.tooltip-inner': 'Copy to clipboard' })
+    }, { once: true })
     e.clearSelection()
   })
 
@@ -157,10 +157,10 @@
     var fallbackMsg = 'Press ' + modifierKey + 'C to copy'
     var tooltipBtn = bootstrap.Tooltip.getInstance(e.trigger)
 
-    e.trigger.setAttribute('data-bs-original-title', fallbackMsg)
-    tooltipBtn.show()
-
-    e.trigger.setAttribute('data-bs-original-title', 'Copy to clipboard')
+    tooltipBtn.setContent({ '.tooltip-inner': fallbackMsg })
+    e.trigger.addEventListener('hidden.bs.tooltip', function () {
+      tooltipBtn.setContent({ '.tooltip-inner': 'Copy to clipboard' })
+    }, { once: true })
   })
 
   anchors.options = {