Merge branch 'main' into tooltip-changes

js/src/tooltip.js

@@ -191,13 +191,7 @@ class Tooltip extends BaseComponent {
     }
 
     if (event) {
-      const dataKey = this.constructor.DATA_KEY
+      const context = this._initializeOnDelegatedTarget(event)
-      let context = Data.getData(event.delegateTarget, dataKey)
-
-      if (!context) {
-        context = new this.constructor(event.delegateTarget, this._getDelegateConfig())
-        Data.setData(event.delegateTarget, dataKey, context)
-      }
 
       context._activeTrigger.click = !context._activeTrigger.click
 
@@ -245,7 +239,10 @@ class Tooltip extends BaseComponent {
       throw new Error('Please use show on visible elements')
     }
 
-    if (this.isWithContent() && this._isEnabled) {
+    if (!(this.isWithContent() && this._isEnabled)) {
+      return
+    }
+
     const showEvent = EventHandler.trigger(this._element, this.constructor.Event.SHOW)
     const shadowRoot = findShadowRoot(this._element)
     const isInTheDom = shadowRoot === null ?
@@ -293,15 +290,7 @@ class Tooltip extends BaseComponent {
       tip.classList.add(...customClass.split(' '))
     }
 
-      // If this is a touch-enabled device we add extra
+    this._enableIosTouchEventsTrick()
-      // empty mouseover listeners to the body's immediate children;
-      // only needed because of broken event delegation on iOS
-      // https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html
-      if ('ontouchstart' in document.documentElement) {
-        [].concat(...document.body.children).forEach(element => {
-          EventHandler.on(element, 'mouseover', noop())
-        })
-      }
 
     const complete = () => {
       const prevHoverState = this._hoverState
@@ -322,7 +311,6 @@ class Tooltip extends BaseComponent {
       complete()
     }
   }
-  }
 
   hide() {
     if (!this._popper) {
@@ -352,12 +340,7 @@ class Tooltip extends BaseComponent {
 
     tip.classList.remove(CLASS_NAME_SHOW)
 
-    // If this is a touch-enabled device we remove the extra
+    this._enableIosTouchEventsTrick()
-    // empty mouseover listeners we added for iOS support
-    if ('ontouchstart' in document.documentElement) {
-      [].concat(...document.body.children)
-        .forEach(element => EventHandler.off(element, 'mouseover', noop))
-    }
 
     this._activeTrigger[TRIGGER_CLICK] = false
     this._activeTrigger[TRIGGER_FOCUS] = false
@@ -440,7 +423,7 @@ class Tooltip extends BaseComponent {
   }
 
   getTitle() {
-    let title = this._element.getAttribute('data-bs-original-title')
+    let title = Manipulator.getDataAttribute(this._element, 'original-title')
 
     if (!title) {
       title = typeof this.config.title === 'function' ?
@@ -465,6 +448,30 @@ class Tooltip extends BaseComponent {
 
   // Private
 
+  _initializeOnDelegatedTarget(event, context) {
+    const dataKey = this.constructor.DATA_KEY
+    context = context || Data.getData(event.delegateTarget, dataKey)
+
+    if (!context) {
+      context = new this.constructor(event.delegateTarget, this._getDelegateConfig())
+      Data.setData(event.delegateTarget, dataKey, context)
+    }
+
+    return context
+  }
+
+  _enableIosTouchEventsTrick() {
+    // 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
+    // https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html
+    if ('ontouchstart' in document.documentElement) {
+      [].concat(...document.body.children).forEach(element => {
+        EventHandler.on(element, 'mouseover', noop)
+      })
+    }
+  }
+
   _getPopperConfig(attachment) {
     const defaultBsConfig = {
       placement: attachment,
@@ -546,7 +553,7 @@ class Tooltip extends BaseComponent {
         EventHandler.on(this._element, eventIn, this.config.selector, event => this._enter(event))
         EventHandler.on(this._element, eventOut, this.config.selector, event => this._leave(event))
       }
-    })
+    }, this)
 
     this._hideModalHandler = () => {
       if (this._element) {
@@ -569,10 +576,10 @@ class Tooltip extends BaseComponent {
 
   _fixTitle() {
     const title = this._element.getAttribute('title')
-    const originalTitleType = typeof this._element.getAttribute('data-bs-original-title')
+    const originalTitleType = typeof Manipulator.getDataAttribute(this._element, 'original-title')
 
     if (title || originalTitleType !== 'string') {
-      this._element.setAttribute('data-bs-original-title', title || '')
+      Manipulator.setDataAttribute(this._element, 'original-title', title || '')
       if (title && !this._element.getAttribute('aria-label') && !this._element.textContent) {
         this._element.setAttribute('aria-label', title)
       }
@@ -582,16 +589,7 @@ class Tooltip extends BaseComponent {
   }
 
   _enter(event, context) {
-    const dataKey = this.constructor.DATA_KEY
+    context = this._initializeOnDelegatedTarget(event, context)
-    context = context || Data.getData(event.delegateTarget, dataKey)
-
-    if (!context) {
-      context = new this.constructor(
-        event.delegateTarget,
-        this._getDelegateConfig()
-      )
-      Data.setData(event.delegateTarget, dataKey, context)
-    }
 
     if (event) {
       context._activeTrigger[
@@ -621,16 +619,7 @@ class Tooltip extends BaseComponent {
   }
 
   _leave(event, context) {
-    const dataKey = this.constructor.DATA_KEY
+    context = this._initializeOnDelegatedTarget(event, context)
-    context = context || Data.getData(event.delegateTarget, dataKey)
-
-    if (!context) {
-      context = new this.constructor(
-        event.delegateTarget,
-        this._getDelegateConfig()
-      )
-      Data.setData(event.delegateTarget, dataKey, context)
-    }
 
     if (event) {
       context._activeTrigger[