Ability to add custom class in tooltip/popover (#32217)

Porting of #31834 to main.

Co-authored-by: XhmikosR <[email protected]>

3 files changed, 78 insertions, 0 deletions

diff --git a/js/src/tooltip.js b/js/src/tooltip.js
index b2495a3e1..368e04b30 100644
--- a/js/src/tooltip.js
+++ b/js/src/tooltip.js
@@ -54,6 +54,7 @@ const DefaultType = {
   container: '(string|element|boolean)',
   fallbackPlacement: '(string|array)',
   boundary: '(string|element)',
+  customClass: '(string|function)',
   sanitize: 'boolean',
   sanitizeFn: '(null|function)',
   allowList: 'object',
@@ -83,6 +84,7 @@ const Default = {
   container: false,
   fallbackPlacement: 'flip',
   boundary: 'scrollParent',
+  customClass: '',
   sanitize: true,
   sanitizeFn: null,
   allowList: DefaultAllowlist,
@@ -296,6 +298,11 @@ class Tooltip {
 
       tip.classList.add(CLASS_NAME_SHOW)
 
+      const customClass = typeof this.config.customClass === 'function' ? this.config.customClass() : this.config.customClass
+      if (customClass) {
+        tip.classList.add(...customClass.split(' '))
+      }
+
       // If this is a touch-enabled device we add extra
       // empty mouseover listeners to the body's immediate children;
       // only needed because of broken event delegation on iOS
diff --git a/js/tests/unit/popover.spec.js b/js/tests/unit/popover.spec.js
index df4830595..e87ed1214 100644
--- a/js/tests/unit/popover.spec.js
+++ b/js/tests/unit/popover.spec.js
@@ -116,6 +116,22 @@ describe('Popover', () => {
 
       popover.show()
     })
+
+    it('should show a popover with provided custom class', done => {
+      fixtureEl.innerHTML = '<a href="#" title="Popover" data-bs-content="https://twitter.com/getbootstrap" data-bs-custom-class="custom-class">BS twitter</a>'
+
+      const popoverEl = fixtureEl.querySelector('a')
+      const popover = new Popover(popoverEl)
+
+      popoverEl.addEventListener('shown.bs.popover', () => {
+        const tip = document.querySelector('.popover')
+        expect(tip).toBeDefined()
+        expect(tip.classList.contains('custom-class')).toBeTrue()
+        done()
+      })
+
+      popover.show()
+    })
   })
 
   describe('hide', () => {
diff --git a/js/tests/unit/tooltip.spec.js b/js/tests/unit/tooltip.spec.js
index c781f587a..da2abba31 100644
--- a/js/tests/unit/tooltip.spec.js
+++ b/js/tests/unit/tooltip.spec.js
@@ -632,6 +632,61 @@ describe('Tooltip', () => {
 
       tooltipEl.dispatchEvent(createEvent('mouseover'))
     })
+
+    it('should show a tooltip with custom class provided in data attributes', done => {
+      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip" data-bs-custom-class="custom-class">'
+
+      const tooltipEl = fixtureEl.querySelector('a')
+      const tooltip = new Tooltip(tooltipEl)
+
+      tooltipEl.addEventListener('shown.bs.tooltip', () => {
+        const tip = document.querySelector('.tooltip')
+        expect(tip).toBeDefined()
+        expect(tip.classList.contains('custom-class')).toBeTrue()
+        done()
+      })
+
+      tooltip.show()
+    })
+
+    it('should show a tooltip with custom class provided as a string in config', done => {
+      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
+
+      const tooltipEl = fixtureEl.querySelector('a')
+      const tooltip = new Tooltip(tooltipEl, {
+        customClass: 'custom-class custom-class-2'
+      })
+
+      tooltipEl.addEventListener('shown.bs.tooltip', () => {
+        const tip = document.querySelector('.tooltip')
+        expect(tip).toBeDefined()
+        expect(tip.classList.contains('custom-class')).toBeTrue()
+        expect(tip.classList.contains('custom-class-2')).toBeTrue()
+        done()
+      })
+
+      tooltip.show()
+    })
+
+    it('should show a tooltip with custom class provided as a function in config', done => {
+      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
+
+      const spy = jasmine.createSpy('customClass').and.returnValue('custom-class')
+      const tooltipEl = fixtureEl.querySelector('a')
+      const tooltip = new Tooltip(tooltipEl, {
+        customClass: spy
+      })
+
+      tooltipEl.addEventListener('shown.bs.tooltip', () => {
+        const tip = document.querySelector('.tooltip')
+        expect(tip).toBeDefined()
+        expect(spy).toHaveBeenCalled()
+        expect(tip.classList.contains('custom-class')).toBeTrue()
+        done()
+      })
+
+      tooltip.show()
+    })
   })
 
   describe('hide', () => {