create a base component

1 files changed, 35 insertions, 37 deletions

diff --git a/js/src/tooltip.js b/js/src/tooltip.js
index 368e04b30..99f910efc 100644
--- a/js/src/tooltip.js
+++ b/js/src/tooltip.js
@@ -26,6 +26,7 @@ import EventHandler from './dom/event-handler'
 import Manipulator from './dom/manipulator'
 import Popper from 'popper.js'
 import SelectorEngine from './dom/selector-engine'
+import BaseComponent from './base-component'
 
 /**
  * ------------------------------------------------------------------------
@@ -124,12 +125,14 @@ const TRIGGER_MANUAL = 'manual'
  * ------------------------------------------------------------------------
  */
 
-class Tooltip {
+class Tooltip extends BaseComponent {
   constructor(element, config) {
     if (typeof Popper === 'undefined') {
       throw new TypeError('Bootstrap\'s tooltips require Popper (https://popper.js.org)')
     }
 
+    super(element)
+
     // private
     this._isEnabled = true
     this._timeout = 0
@@ -138,7 +141,6 @@ class Tooltip {
     this._popper = null
 
     // Protected
-    this.element = element
     this.config = this._getConfig(config)
     this.tip = null
 
@@ -227,10 +229,10 @@ class Tooltip {
   dispose() {
     clearTimeout(this._timeout)
 
-    Data.removeData(this.element, this.constructor.DATA_KEY)
+    Data.removeData(this._element, this.constructor.DATA_KEY)
 
-    EventHandler.off(this.element, this.constructor.EVENT_KEY)
-    EventHandler.off(this.element.closest(`.${CLASS_NAME_MODAL}`), 'hide.bs.modal', this._hideModalHandler)
+    EventHandler.off(this._element, this.constructor.EVENT_KEY)
+    EventHandler.off(this._element.closest(`.${CLASS_NAME_MODAL}`), 'hide.bs.modal', this._hideModalHandler)
 
     if (this.tip) {
       this.tip.parentNode.removeChild(this.tip)
@@ -245,22 +247,22 @@ class Tooltip {
     }
 
     this._popper = null
-    this.element = null
+    this._element = null
     this.config = null
     this.tip = null
   }
 
   show() {
-    if (this.element.style.display === 'none') {
+    if (this._element.style.display === 'none') {
       throw new Error('Please use show on visible elements')
     }
 
     if (this.isWithContent() && this._isEnabled) {
-      const showEvent = EventHandler.trigger(this.element, this.constructor.Event.SHOW)
-      const shadowRoot = findShadowRoot(this.element)
+      const showEvent = EventHandler.trigger(this._element, this.constructor.Event.SHOW)
+      const shadowRoot = findShadowRoot(this._element)
       const isInTheDom = shadowRoot === null ?
-        this.element.ownerDocument.documentElement.contains(this.element) :
-        shadowRoot.contains(this.element)
+        this._element.ownerDocument.documentElement.contains(this._element) :
+        shadowRoot.contains(this._element)
 
       if (showEvent.defaultPrevented || !isInTheDom) {
         return
@@ -270,7 +272,7 @@ class Tooltip {
       const tipId = getUID(this.constructor.NAME)
 
       tip.setAttribute('id', tipId)
-      this.element.setAttribute('aria-describedby', tipId)
+      this._element.setAttribute('aria-describedby', tipId)
 
       this.setContent()
 
@@ -279,7 +281,7 @@ class Tooltip {
       }
 
       const placement = typeof this.config.placement === 'function' ?
-        this.config.placement.call(this, tip, this.element) :
+        this.config.placement.call(this, tip, this._element) :
         this.config.placement
 
       const attachment = this._getAttachment(placement)
@@ -288,13 +290,13 @@ class Tooltip {
       const container = this._getContainer()
       Data.setData(tip, this.constructor.DATA_KEY, this)
 
-      if (!this.element.ownerDocument.documentElement.contains(this.tip)) {
+      if (!this._element.ownerDocument.documentElement.contains(this.tip)) {
         container.appendChild(tip)
       }
 
-      EventHandler.trigger(this.element, this.constructor.Event.INSERTED)
+      EventHandler.trigger(this._element, this.constructor.Event.INSERTED)
 
-      this._popper = new Popper(this.element, tip, this._getPopperConfig(attachment))
+      this._popper = new Popper(this._element, tip, this._getPopperConfig(attachment))
 
       tip.classList.add(CLASS_NAME_SHOW)
 
@@ -321,7 +323,7 @@ class Tooltip {
         const prevHoverState = this._hoverState
         this._hoverState = null
 
-        EventHandler.trigger(this.element, this.constructor.Event.SHOWN)
+        EventHandler.trigger(this._element, this.constructor.Event.SHOWN)
 
         if (prevHoverState === HOVER_STATE_OUT) {
           this._leave(null, this)
@@ -350,12 +352,12 @@ class Tooltip {
       }
 
       this._cleanTipClass()
-      this.element.removeAttribute('aria-describedby')
-      EventHandler.trigger(this.element, this.constructor.Event.HIDDEN)
+      this._element.removeAttribute('aria-describedby')
+      EventHandler.trigger(this._element, this.constructor.Event.HIDDEN)
       this._popper.destroy()
     }
 
-    const hideEvent = EventHandler.trigger(this.element, this.constructor.Event.HIDE)
+    const hideEvent = EventHandler.trigger(this._element, this.constructor.Event.HIDE)
     if (hideEvent.defaultPrevented) {
       return
     }
@@ -450,11 +452,11 @@ class Tooltip {
   }
 
   getTitle() {
-    let title = this.element.getAttribute('data-bs-original-title')
+    let title = this._element.getAttribute('data-bs-original-title')
 
     if (!title) {
       title = typeof this.config.title === 'function' ?
-        this.config.title.call(this.element) :
+        this.config.title.call(this._element) :
         this.config.title
     }
 
@@ -503,7 +505,7 @@ class Tooltip {
       offset.fn = data => {
         data.offsets = {
           ...data.offsets,
-          ...(this.config.offset(data.offsets, this.element) || {})
+          ...(this.config.offset(data.offsets, this._element) || {})
         }
 
         return data
@@ -536,7 +538,7 @@ class Tooltip {
 
     triggers.forEach(trigger => {
       if (trigger === 'click') {
-        EventHandler.on(this.element,
+        EventHandler.on(this._element,
           this.constructor.Event.CLICK,
           this.config.selector,
           event => this.toggle(event)
@@ -549,12 +551,12 @@ class Tooltip {
           this.constructor.Event.MOUSELEAVE :
           this.constructor.Event.FOCUSOUT
 
-        EventHandler.on(this.element,
+        EventHandler.on(this._element,
           eventIn,
           this.config.selector,
           event => this._enter(event)
         )
-        EventHandler.on(this.element,
+        EventHandler.on(this._element,
           eventOut,
           this.config.selector,
           event => this._leave(event)
@@ -563,12 +565,12 @@ class Tooltip {
     })
 
     this._hideModalHandler = () => {
-      if (this.element) {
+      if (this._element) {
         this.hide()
       }
     }
 
-    EventHandler.on(this.element.closest(`.${CLASS_NAME_MODAL}`),
+    EventHandler.on(this._element.closest(`.${CLASS_NAME_MODAL}`),
       'hide.bs.modal',
       this._hideModalHandler
     )
@@ -585,12 +587,12 @@ class Tooltip {
   }
 
   _fixTitle() {
-    const title = this.element.getAttribute('title')
-    const originalTitleType = typeof this.element.getAttribute('data-bs-original-title')
+    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 || '')
-      this.element.setAttribute('title', '')
+      this._element.setAttribute('data-bs-original-title', title || '')
+      this._element.setAttribute('title', '')
     }
   }
 
@@ -683,7 +685,7 @@ class Tooltip {
   }
 
   _getConfig(config) {
-    const dataAttributes = Manipulator.getDataAttributes(this.element)
+    const dataAttributes = Manipulator.getDataAttributes(this._element)
 
     Object.keys(dataAttributes).forEach(dataAttr => {
       if (DISALLOWED_ATTRIBUTES.has(dataAttr)) {
@@ -792,10 +794,6 @@ class Tooltip {
       }
     })
   }
-
-  static getInstance(element) {
-    return Data.getData(element, DATA_KEY)
-  }
 }
 
 /**