Tooltip: remove title attribute before show & add tests (#35456)

2 files changed, 33 insertions, 3 deletions

diff --git a/js/src/tooltip.js b/js/src/tooltip.js
index 2f3acda384..19a9b31685 100644
--- a/js/src/tooltip.js
+++ b/js/src/tooltip.js
@@ -394,7 +394,7 @@ class Tooltip extends BaseComponent {
   }
 
   _getTitle() {
-    return this._resolvePossibleFunction(this._config.title) || this._element.getAttribute('title')
+    return this._config.title
   }
 
   // Private
@@ -510,11 +510,17 @@ class Tooltip extends BaseComponent {
   }
 
   _fixTitle() {
-    const title = this._element.getAttribute('title')
+    const title = this._config.originalTitle
 
-    if (title && !this._element.getAttribute('aria-label') && !this._element.textContent) {
+    if (!title) {
+      return
+    }
+
+    if (!this._element.getAttribute('aria-label') && !this._element.textContent) {
       this._element.setAttribute('aria-label', title)
     }
+
+    this._element.removeAttribute('title')
   }
 
   _enter() {
@@ -579,6 +585,8 @@ 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()
     }
diff --git a/js/tests/unit/tooltip.spec.js b/js/tests/unit/tooltip.spec.js
index f92b74d963..9054c0f642 100644
--- a/js/tests/unit/tooltip.spec.js
+++ b/js/tests/unit/tooltip.spec.js
@@ -180,6 +180,15 @@ describe('Tooltip', () => {
       expect(getPopperConfig).toHaveBeenCalled()
       expect(popperConfig.placement).toEqual('left')
     })
+
+    it('should use original title, if not "data-bs-title" is given', () => {
+      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"></a>'
+
+      const tooltipEl = fixtureEl.querySelector('a')
+      const tooltip = new Tooltip(tooltipEl)
+
+      expect(tooltip._config.title).toEqual('Another tooltip')
+    })
   })
 
   describe('enable', () => {
@@ -855,6 +864,19 @@ describe('Tooltip', () => {
 
       tooltip.show()
     })
+
+    it('should remove `title` attribute if exists', done => {
+      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"></a>'
+
+      const tooltipEl = fixtureEl.querySelector('a')
+      const tooltip = new Tooltip(tooltipEl)
+
+      tooltipEl.addEventListener('shown.bs.tooltip', () => {
+        expect(tooltipEl.getAttribute('title')).toBeNull()
+        done()
+      })
+      tooltip.show()
+    })
   })
 
   describe('hide', () => {