Clean tooltip component unneeded functionality (#32692)

Author: GeoSot

js/src/popover.js

@@ -15,7 +15,6 @@ import Tooltip from './tooltip'
 const NAME = 'popover'
 const DATA_KEY = 'bs.popover'
 const EVENT_KEY = `.${DATA_KEY}`
-const CLASS_PREFIX = 'bs-popover'
 
 const SELECTOR_TITLE = '.popover-header'
 const SELECTOR_CONTENT = '.popover-body'
@@ -90,10 +89,6 @@ class Popover extends Tooltip {
     return this._resolvePossibleFunction(this._config.content)
   }
 
-  _getBasicClassPrefix() {
-    return CLASS_PREFIX
-  }
-
   // Static
   static jQueryInterface(config) {
     return this.each(function () {

js/src/tooltip.js

@@ -29,7 +29,6 @@ import TemplateFactory from './util/template-factory'
 const NAME = 'tooltip'
 const DATA_KEY = 'bs.tooltip'
 const EVENT_KEY = `.${DATA_KEY}`
-const CLASS_PREFIX = 'bs-tooltip'
 const DISALLOWED_ATTRIBUTES = new Set(['sanitize', 'allowList', 'sanitizeFn'])
 
 const CLASS_NAME_FADE = 'fade'
@@ -232,13 +231,6 @@ class Tooltip extends BaseComponent {
 
     this._element.setAttribute('aria-describedby', tip.getAttribute('id'))
 
-    const placement = typeof this._config.placement === 'function' ?
-      this._config.placement.call(this, tip, this._element) :
-      this._config.placement
-
-    const attachment = this._getAttachment(placement)
-    this._addAttachmentClass(attachment)
-
     const { container } = this._config
     Data.set(tip, this.constructor.DATA_KEY, this)
 
@@ -250,6 +242,10 @@ class Tooltip extends BaseComponent {
     if (this._popper) {
       this._popper.update()
     } else {
+      const placement = typeof this._config.placement === 'function' ?
+        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))
     }
 
@@ -295,7 +291,6 @@ class Tooltip extends BaseComponent {
         tip.remove()
       }
 
-      this._cleanTipClass()
       this._element.removeAttribute('aria-describedby')
       EventHandler.trigger(this._element, this.constructor.Event.HIDDEN)
 
@@ -346,6 +341,8 @@ class Tooltip extends BaseComponent {
 
     const tip = templateFactory.toHtml()
     tip.classList.remove(CLASS_NAME_FADE, CLASS_NAME_SHOW)
+    // todo on v6 the following can be done on css only
+    tip.classList.add(`bs-${this.constructor.NAME}-auto`)
 
     const tipId = getUID(this.constructor.NAME).toString()
 
@@ -463,19 +460,8 @@ class Tooltip extends BaseComponent {
           options: {
             element: SELECTOR_TOOLTIP_ARROW
           }
-        },
-        {
-          name: 'onChange',
-          enabled: true,
-          phase: 'afterWrite',
-          fn: data => this._handlePopperPlacementChange(data)
-        }
-      ],
-      onFirstUpdate: data => {
-        if (data.options.placement !== data.placement) {
-          this._handlePopperPlacementChange(data)
         }
-      }
+      ]
     }
 
     return {
@@ -484,14 +470,6 @@ class Tooltip extends BaseComponent {
     }
   }
 
-  _addAttachmentClass(attachment) {
-    this.getTipElement().classList.add(`${this._getBasicClassPrefix()}-${this.updateAttachment(attachment)}`)
-  }
-
-  _getAttachment(placement) {
-    return AttachmentMap[placement.toUpperCase()]
-  }
-
   _setListeners() {
     const triggers = this._config.trigger.split(' ')
 
@@ -652,33 +630,6 @@ class Tooltip extends BaseComponent {
     return config
   }
 
-  _cleanTipClass() {
-    const tip = this.getTipElement()
-    const basicClassPrefixRegex = new RegExp(`(^|\\s)${this._getBasicClassPrefix()}\\S+`, 'g')
-    const tabClass = tip.getAttribute('class').match(basicClassPrefixRegex)
-    if (tabClass !== null && tabClass.length > 0) {
-      for (const tClass of tabClass.map(token => token.trim())) {
-        tip.classList.remove(tClass)
-      }
-    }
-  }
-
-  _getBasicClassPrefix() {
-    return CLASS_PREFIX
-  }
-
-  _handlePopperPlacementChange(popperData) {
-    const { state } = popperData
-
-    if (!state) {
-      return
-    }
-
-    this.tip = state.elements.popper
-    this._cleanTipClass()
-    this._addAttachmentClass(this._getAttachment(state.placement))
-  }
-
   _disposePopper() {
     if (this._popper) {
       this._popper.destroy()

js/tests/unit/tooltip.spec.js

@@ -465,13 +465,12 @@ describe('Tooltip', () => {
       })
 
       tooltipEl.addEventListener('inserted.bs.tooltip', () => {
-        expect(tooltip.getTipElement().classList.contains('bs-tooltip-bottom')).toEqual(true)
+        expect(tooltip.getTipElement().classList.contains('bs-tooltip-auto')).toEqual(true)
       })
 
       tooltipEl.addEventListener('shown.bs.tooltip', () => {
-        const tooltipShown = document.querySelector('.tooltip')
-
-        expect(tooltipShown.classList.contains('bs-tooltip-bottom')).toEqual(true)
+        expect(tooltip.getTipElement().classList.contains('bs-tooltip-auto')).toEqual(true)
+        expect(tooltip.getTipElement().getAttribute('data-popper-placement')).toEqual('bottom')
         done()
       })
 
@@ -699,6 +698,7 @@ describe('Tooltip', () => {
 
         setTimeout(() => {
           expect(tooltip.getTipElement().classList.contains('show')).toEqual(true)
+          expect(document.querySelectorAll('.tooltip').length).toEqual(1)
           done()
         }, 200)
       }, 0)
@@ -1092,7 +1092,7 @@ describe('Tooltip', () => {
       })
 
       tooltipEl.addEventListener('inserted.bs.tooltip', () => {
-        expect(tooltip.getTipElement().classList.contains('bs-tooltip-end')).toEqual(true)
+        expect(tooltip.getTipElement().classList.contains('bs-tooltip-auto')).toEqual(true)
         done()
       })
 
@@ -1108,7 +1108,7 @@ describe('Tooltip', () => {
       })
 
       tooltipEl.addEventListener('inserted.bs.tooltip', () => {
-        expect(tooltip.getTipElement().classList.contains('bs-tooltip-start')).toEqual(true)
+        expect(tooltip.getTipElement().classList.contains('bs-tooltip-auto')).toEqual(true)
         done()
       })