implement global dispose method

10 files changed, 224 insertions, 98 deletions

diff --git a/js/src/alert.js b/js/src/alert.js
index 57a59746a..eda74d706 100644
--- a/js/src/alert.js
+++ b/js/src/alert.js
@@ -20,6 +20,8 @@ const Alert = (($) => {
   const NAME                = 'alert'
   const VERSION             = '4.0.0'
   const DATA_KEY            = 'bs.alert'
+  const EVENT_KEY           = `.${DATA_KEY}`
+  const DATA_API_KEY        = '.data-api'
   const JQUERY_NO_CONFLICT  = $.fn[NAME]
   const TRANSITION_DURATION = 150
 
@@ -28,9 +30,9 @@ const Alert = (($) => {
   }
 
   const Event = {
-    CLOSE  : 'close.bs.alert',
-    CLOSED : 'closed.bs.alert',
-    CLICK  : 'click.bs.alert.data-api'
+    CLOSE          : `close${EVENT_KEY}`,
+    CLOSED         : `closed${EVENT_KEY}`,
+    CLICK_DATA_API : `click${EVENT_KEY}${DATA_API_KEY}`
   }
 
   const ClassName = {
@@ -75,6 +77,11 @@ const Alert = (($) => {
       this._removeElement(rootElement)
     }
 
+    dispose() {
+      $.removeData(this._element, DATA_KEY)
+      this._element = null
+    }
+
 
     // private
 
@@ -159,7 +166,7 @@ const Alert = (($) => {
    */
 
   $(document).on(
-    Event.CLICK,
+    Event.CLICK_DATA_API,
     Selector.DISMISS,
     Alert._handleDismiss(new Alert())
   )
diff --git a/js/src/button.js b/js/src/button.js
index 7520de2f6..8210e8ae0 100644
--- a/js/src/button.js
+++ b/js/src/button.js
@@ -17,6 +17,8 @@ const Button = (($) => {
   const NAME                = 'button'
   const VERSION             = '4.0.0'
   const DATA_KEY            = 'bs.button'
+  const EVENT_KEY           = `.${DATA_KEY}`
+  const DATA_API_KEY        = '.data-api'
   const JQUERY_NO_CONFLICT  = $.fn[NAME]
   const TRANSITION_DURATION = 150
 
@@ -35,8 +37,9 @@ const Button = (($) => {
   }
 
   const Event = {
-    CLICK      : 'click.bs.button.data-api',
-    FOCUS_BLUR : 'focus.bs.button.data-api blur.bs.button.data-api'
+    CLICK_DATA_API      : `click${EVENT_KEY}${DATA_API_KEY}`,
+    FOCUS_BLUR_DATA_API : `focus${EVENT_KEY}${DATA_API_KEY} `
+                        + `blur${EVENT_KEY}${DATA_API_KEY}`
   }
 
 
@@ -101,6 +104,11 @@ const Button = (($) => {
       }
     }
 
+    dispose() {
+      $.removeData(this._element, DATA_KEY)
+      this._element = null
+    }
+
 
     // static
 
@@ -129,7 +137,7 @@ const Button = (($) => {
    */
 
   $(document)
-    .on(Event.CLICK, Selector.DATA_TOGGLE_CARROT, function (event) {
+    .on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE_CARROT, function (event) {
       event.preventDefault()
 
       let button = event.target
@@ -140,7 +148,7 @@ const Button = (($) => {
 
       Button._jQueryInterface.call($(button), 'toggle')
     })
-    .on(Event.FOCUS_BLUR, Selector.DATA_TOGGLE_CARROT, function (event) {
+    .on(Event.FOCUS_BLUR_DATA_API, Selector.DATA_TOGGLE_CARROT, function (event) {
       var button = $(event.target).closest(Selector.BUTTON)[0]
       $(button).toggleClass(ClassName.FOCUS, /^focus(in)?$/.test(event.type))
     })
diff --git a/js/src/carousel.js b/js/src/carousel.js
index 8c9b45247..a4b6da298 100644
--- a/js/src/carousel.js
+++ b/js/src/carousel.js
@@ -20,6 +20,8 @@ const Carousel = (($) => {
   const NAME                = 'carousel'
   const VERSION             = '4.0.0'
   const DATA_KEY            = 'bs.carousel'
+  const EVENT_KEY           = `.${DATA_KEY}`
+  const DATA_API_KEY        = '.data-api'
   const JQUERY_NO_CONFLICT  = $.fn[NAME]
   const TRANSITION_DURATION = 600
 
@@ -37,10 +39,13 @@ const Carousel = (($) => {
   }
 
   const Event = {
-    SLIDE : 'slide.bs.carousel',
-    SLID  : 'slid.bs.carousel',
-    CLICK : 'click.bs.carousel.data-api',
-    LOAD  : 'load'
+    SLIDE          : `slide${EVENT_KEY}`,
+    SLID           : `slid${EVENT_KEY}`,
+    KEYDOWN        : `keydown${EVENT_KEY}`,
+    MOUSEENTER     : `mouseenter${EVENT_KEY}`,
+    MOUSELEAVE     : `mouseleave${EVENT_KEY}`,
+    LOAD_DATA_API  : `load${EVENT_KEY}${DATA_API_KEY}`,
+    CLICK_DATA_API : `click${EVENT_KEY}${DATA_API_KEY}`
   }
 
   const ClassName = {
@@ -171,20 +176,34 @@ const Carousel = (($) => {
       this._slide(direction, this._items[index])
     }
 
+    dispose() {
+      $(this._element).off(EVENT_KEY)
+      $.removeData(this._element, DATA_KEY)
+
+      this._items             = null
+      this._config            = null
+      this._element           = null
+      this._interval          = null
+      this._isPaused          = null
+      this._isSliding         = null
+      this._activeElement     = null
+      this._indicatorsElement = null
+    }
+
 
     // private
 
     _addEventListeners() {
       if (this._config.keyboard) {
         $(this._element)
-          .on('keydown.bs.carousel', $.proxy(this._keydown, this))
+          .on(Event.KEYDOWN, $.proxy(this._keydown, this))
       }
 
       if (this._config.pause == 'hover' &&
         !('ontouchstart' in document.documentElement)) {
         $(this._element)
-          .on('mouseenter.bs.carousel', $.proxy(this.pause, this))
-          .on('mouseleave.bs.carousel', $.proxy(this.cycle, this))
+          .on(Event.MOUSEENTER, $.proxy(this.pause, this))
+          .on(Event.MOUSELEAVE, $.proxy(this.cycle, this))
       }
     }
 
@@ -405,9 +424,9 @@ const Carousel = (($) => {
    */
 
   $(document)
-    .on(Event.CLICK, Selector.DATA_SLIDE, Carousel._dataApiClickHandler)
+    .on(Event.CLICK_DATA_API, Selector.DATA_SLIDE, Carousel._dataApiClickHandler)
 
-  $(window).on(Event.LOAD, function () {
+  $(window).on(Event.LOAD_DATA_API, function () {
     $(Selector.DATA_RIDE).each(function () {
       let $carousel = $(this)
       Carousel._jQueryInterface.call($carousel, $carousel.data())
diff --git a/js/src/collapse.js b/js/src/collapse.js
index ac506b86b..ded623448 100644
--- a/js/src/collapse.js
+++ b/js/src/collapse.js
@@ -20,6 +20,8 @@ const Collapse = (($) => {
   const NAME                = 'collapse'
   const VERSION             = '4.0.0'
   const DATA_KEY            = 'bs.collapse'
+  const EVENT_KEY           = `.${DATA_KEY}`
+  const DATA_API_KEY        = '.data-api'
   const JQUERY_NO_CONFLICT  = $.fn[NAME]
   const TRANSITION_DURATION = 600
 
@@ -29,11 +31,11 @@ const Collapse = (($) => {
   }
 
   const Event = {
-    SHOW   : 'show.bs.collapse',
-    SHOWN  : 'shown.bs.collapse',
-    HIDE   : 'hide.bs.collapse',
-    HIDDEN : 'hidden.bs.collapse',
-    CLICK  : 'click.bs.collapse.data-api'
+    SHOW           : `show${EVENT_KEY}`,
+    SHOWN          : `shown${EVENT_KEY}`,
+    HIDE           : `hide${EVENT_KEY}`,
+    HIDDEN         : `hidden${EVENT_KEY}`,
+    CLICK_DATA_API : `click${EVENT_KEY}${DATA_API_KEY}`
   }
 
   const ClassName = {
@@ -110,8 +112,8 @@ const Collapse = (($) => {
         return
       }
 
-      let activesData
       let actives
+      let activesData
 
       if (this._parent) {
         actives = $.makeArray($(Selector.ACTIVES))
@@ -244,6 +246,16 @@ const Collapse = (($) => {
       this._isTransitioning = isTransitioning
     }
 
+    dispose() {
+      $.removeData(this._element, DATA_KEY)
+
+      this._config          = null
+      this._parent          = null
+      this._element         = null
+      this._triggerArray    = null
+      this._isTransitioning = null
+    }
+
 
     // private
 
@@ -323,7 +335,7 @@ const Collapse = (($) => {
    * ------------------------------------------------------------------------
    */
 
-  $(document).on(Event.CLICK, Selector.DATA_TOGGLE, function (event) {
+  $(document).on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (event) {
     event.preventDefault()
 
     let target = Collapse._getTargetFromElement(this)
diff --git a/js/src/dropdown.js b/js/src/dropdown.js
index 3135ca73a..bae0f7adb 100644
--- a/js/src/dropdown.js
+++ b/js/src/dropdown.js
@@ -20,16 +20,18 @@ const Dropdown = (($) => {
   const NAME                = 'dropdown'
   const VERSION             = '4.0.0'
   const DATA_KEY            = 'bs.dropdown'
+  const EVENT_KEY           = `.${DATA_KEY}`
+  const DATA_API_KEY        = '.data-api'
   const JQUERY_NO_CONFLICT  = $.fn[NAME]
 
   const Event = {
-    HIDE       : 'hide.bs.dropdown',
-    HIDDEN     : 'hidden.bs.dropdown',
-    SHOW       : 'show.bs.dropdown',
-    SHOWN      : 'shown.bs.dropdown',
-    CLICK      : 'click.bs.dropdown',
-    KEYDOWN    : 'keydown.bs.dropdown.data-api',
-    CLICK_DATA : 'click.bs.dropdown.data-api'
+    HIDE             : `hide${EVENT_KEY}`,
+    HIDDEN           : `hidden${EVENT_KEY}`,
+    SHOW             : `show${EVENT_KEY}`,
+    SHOWN            : `shown${EVENT_KEY}`,
+    CLICK            : `click${EVENT_KEY}`,
+    CLICK_DATA_API   : `click${EVENT_KEY}${DATA_API_KEY}`,
+    KEYDOWN_DATA_API : `keydown${EVENT_KEY}${DATA_API_KEY}`
   }
 
   const ClassName = {
@@ -59,7 +61,9 @@ const Dropdown = (($) => {
   class Dropdown {
 
     constructor(element) {
-      $(element).on(Event.CLICK, this.toggle)
+      this._element = element
+
+      this._addEventListeners()
     }
 
 
@@ -114,6 +118,19 @@ const Dropdown = (($) => {
       return false
     }
 
+    dispose() {
+      $.removeData(this._element, DATA_KEY)
+      $(this._element).off(EVENT_KEY)
+      this._element = null
+    }
+
+
+    // private
+
+    _addEventListeners() {
+      $(this._element).on(Event.CLICK, this.toggle)
+    }
+
 
     // static
 
@@ -239,12 +256,12 @@ const Dropdown = (($) => {
    */
 
   $(document)
-    .on(Event.KEYDOWN, Selector.DATA_TOGGLE,  Dropdown._dataApiKeydownHandler)
-    .on(Event.KEYDOWN, Selector.ROLE_MENU,    Dropdown._dataApiKeydownHandler)
-    .on(Event.KEYDOWN, Selector.ROLE_LISTBOX, Dropdown._dataApiKeydownHandler)
-    .on(Event.CLICK_DATA, Dropdown._clearMenus)
-    .on(Event.CLICK_DATA, Selector.DATA_TOGGLE, Dropdown.prototype.toggle)
-    .on(Event.CLICK_DATA, Selector.FORM_CHILD,  function (e) {
+    .on(Event.KEYDOWN_DATA_API, Selector.DATA_TOGGLE,  Dropdown._dataApiKeydownHandler)
+    .on(Event.KEYDOWN_DATA_API, Selector.ROLE_MENU,    Dropdown._dataApiKeydownHandler)
+    .on(Event.KEYDOWN_DATA_API, Selector.ROLE_LISTBOX, Dropdown._dataApiKeydownHandler)
+    .on(Event.CLICK_DATA_API, Dropdown._clearMenus)
+    .on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE, Dropdown.prototype.toggle)
+    .on(Event.CLICK_DATA_API, Selector.FORM_CHILD,  function (e) {
        e.stopPropagation()
      })
 
diff --git a/js/src/modal.js b/js/src/modal.js
index 300ea2a7f..d0e1ec21b 100644
--- a/js/src/modal.js
+++ b/js/src/modal.js
@@ -20,6 +20,8 @@ const Modal = (($) => {
   const NAME                         = 'modal'
   const VERSION                      = '4.0.0'
   const DATA_KEY                     = 'bs.modal'
+  const EVENT_KEY                    = `.${DATA_KEY}`
+  const DATA_API_KEY                 = '.data-api'
   const JQUERY_NO_CONFLICT           = $.fn[NAME]
   const TRANSITION_DURATION          = 300
   const BACKDROP_TRANSITION_DURATION = 150
@@ -31,17 +33,17 @@ const Modal = (($) => {
   }
 
   const Event = {
-    HIDE      : 'hide.bs.modal',
-    HIDDEN    : 'hidden.bs.modal',
-    SHOW      : 'show.bs.modal',
-    SHOWN     : 'shown.bs.modal',
-    DISMISS   : 'click.dismiss.bs.modal',
-    KEYDOWN   : 'keydown.dismiss.bs.modal',
-    FOCUSIN   : 'focusin.bs.modal',
-    RESIZE    : 'resize.bs.modal',
-    CLICK     : 'click.bs.modal.data-api',
-    MOUSEDOWN : 'mousedown.dismiss.bs.modal',
-    MOUSEUP   : 'mouseup.dismiss.bs.modal'
+    HIDE              : `hide${EVENT_KEY}`,
+    HIDDEN            : `hidden${EVENT_KEY}`,
+    SHOW              : `show${EVENT_KEY}`,
+    SHOWN             : `shown${EVENT_KEY}`,
+    FOCUSIN           : `focusin${EVENT_KEY}`,
+    RESIZE            : `resize${EVENT_KEY}`,
+    CLICK_DISMISS     : `click.dismiss${EVENT_KEY}`,
+    KEYDOWN_DISMISS   : `keydown.dismiss${EVENT_KEY}`,
+    MOUSEUP_DISMISS   : `mouseup.dismiss${EVENT_KEY}`,
+    MOUSEDOWN_DISMISS : `mousedown.dismiss${EVENT_KEY}`,
+    CLICK_DATA_API    : `click${EVENT_KEY}${DATA_API_KEY}`
   }
 
   const ClassName = {
@@ -119,13 +121,13 @@ const Modal = (($) => {
       this._setResizeEvent()
 
       $(this._element).on(
-        Event.DISMISS,
+        Event.CLICK_DISMISS,
         Selector.DATA_DISMISS,
         $.proxy(this.hide, this)
       )
 
-      $(this._dialog).on(Event.MOUSEDOWN, () => {
-        $(this._element).one(Event.MOUSEUP, (event) => {
+      $(this._dialog).on(Event.MOUSEDOWN_DISMISS, () => {
+        $(this._element).one(Event.MOUSEUP_DISMISS, (event) => {
           if ($(event.target).is(this._element)) {
             that._ignoreBackdropClick = true
           }
@@ -159,8 +161,8 @@ const Modal = (($) => {
 
       $(this._element).removeClass(ClassName.IN)
 
-      $(this._element).off(Event.DISMISS)
-      $(this._dialog).off(Event.MOUSEDOWN)
+      $(this._element).off(Event.CLICK_DISMISS)
+      $(this._dialog).off(Event.MOUSEDOWN_DISMISS)
 
       if (Util.supportsTransitionEnd() &&
          ($(this._element).hasClass(ClassName.FADE))) {
@@ -173,6 +175,25 @@ const Modal = (($) => {
       }
     }
 
+    dispose() {
+      $.removeData(this._element, DATA_KEY)
+
+      $(window).off(EVENT_KEY)
+      $(document).off(EVENT_KEY)
+      $(this._element).off(EVENT_KEY)
+      $(this._backdrop).off(EVENT_KEY)
+
+      this._config              = null
+      this._element             = null
+      this._dialog              = null
+      this._backdrop            = null
+      this._isShown             = null
+      this._isBodyOverflowing   = null
+      this._ignoreBackdropClick = null
+      this._originalBodyPadding = null
+      this._scrollbarWidth      = null
+    }
+
 
     // private
 
@@ -228,14 +249,14 @@ const Modal = (($) => {
 
     _setEscapeEvent() {
       if (this._isShown && this._config.keyboard) {
-        $(this._element).on(Event.KEYDOWN, (event) => {
+        $(this._element).on(Event.KEYDOWN_DISMISS, (event) => {
           if (event.which === 27) {
             this.hide()
           }
         })
 
       } else if (!this._isShown) {
-        $(this._element).off(Event.KEYDOWN)
+        $(this._element).off(Event.KEYDOWN_DISMISS)
       }
     }
 
@@ -280,7 +301,7 @@ const Modal = (($) => {
 
         $(this._backdrop).appendTo(this.$body)
 
-        $(this._element).on(Event.DISMISS, (event) => {
+        $(this._element).on(Event.CLICK_DISMISS, (event) => {
           if (this._ignoreBackdropClick) {
             this._ignoreBackdropClick = false
             return
@@ -440,7 +461,7 @@ const Modal = (($) => {
    * ------------------------------------------------------------------------
    */
 
-  $(document).on(Event.CLICK, Selector.DATA_TOGGLE, function (event) {
+  $(document).on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (event) {
     let target
     let selector = Util.getSelectorFromElement(this)
 
diff --git a/js/src/popover.js b/js/src/popover.js
index 6b14a2983..eab4c7e63 100644
--- a/js/src/popover.js
+++ b/js/src/popover.js
@@ -20,6 +20,7 @@ const Popover = (($) => {
   const NAME                = 'popover'
   const VERSION             = '4.0.0'
   const DATA_KEY            = 'bs.popover'
+  const EVENT_KEY           = `.${DATA_KEY}`
   const JQUERY_NO_CONFLICT  = $.fn[NAME]
 
   const Default = $.extend({}, Tooltip.Default, {
@@ -44,16 +45,16 @@ const Popover = (($) => {
   }
 
   const Event = {
-    HIDE       : 'hide.bs.popover',
-    HIDDEN     : 'hidden.bs.popover',
-    SHOW       : 'show.bs.popover',
-    SHOWN      : 'shown.bs.popover',
-    INSERTED   : 'inserted.bs.popover',
-    CLICK      : 'click.bs.popover',
-    FOCUSIN    : 'focusin.bs.popover',
-    FOCUSOUT   : 'focusout.bs.popover',
-    MOUSEENTER : 'mouseenter.bs.popover',
-    MOUSELEAVE : 'mouseleave.bs.popover'
+    HIDE       : `hide${EVENT_KEY}`,
+    HIDDEN     : `hidden${EVENT_KEY}`,
+    SHOW       : `show${EVENT_KEY}`,
+    SHOWN      : `shown${EVENT_KEY}`,
+    INSERTED   : `inserted${EVENT_KEY}`,
+    CLICK      : `click${EVENT_KEY}`,
+    FOCUSIN    : `focusin${EVENT_KEY}`,
+    FOCUSOUT   : `focusout${EVENT_KEY}`,
+    MOUSEENTER : `mouseenter${EVENT_KEY}`,
+    MOUSELEAVE : `mouseleave${EVENT_KEY}`
   }
 
 
@@ -88,6 +89,10 @@ const Popover = (($) => {
       return Event
     }
 
+    static get EVENT_KEY() {
+      return EVENT_KEY
+    }
+
 
     // overrides
 
diff --git a/js/src/scrollspy.js b/js/src/scrollspy.js
index 763d133e8..d1be3a45f 100644
--- a/js/src/scrollspy.js
+++ b/js/src/scrollspy.js
@@ -20,6 +20,8 @@ const ScrollSpy = (($) => {
   const NAME               = 'scrollspy'
   const VERSION            = '4.0.0'
   const DATA_KEY           = 'bs.scrollspy'
+  const EVENT_KEY          = `.${DATA_KEY}`
+  const DATA_API_KEY       = '.data-api'
   const JQUERY_NO_CONFLICT = $.fn[NAME]
 
   const Default = {
@@ -27,9 +29,9 @@ const ScrollSpy = (($) => {
   }
 
   const Event = {
-    ACTIVATE : 'activate.bs.scrollspy',
-    SCROLL   : 'scroll.bs.scrollspy',
-    LOAD     : 'load.bs.scrollspy.data-api'
+    ACTIVATE      : `activate${EVENT_KEY}`,
+    SCROLL        : `scroll${EVENT_KEY}`,
+    LOAD_DATA_API : `load${EVENT_KEY}${DATA_API_KEY}`
   }
 
   const ClassName = {
@@ -54,6 +56,7 @@ const ScrollSpy = (($) => {
   class ScrollSpy {
 
     constructor(element, config) {
+      this._element       = element
       this._scrollElement = element.tagName === 'BODY' ? window : element
       this._config        = $.extend({}, Default, config)
       this._selector      = `${this._config.target || ''} .nav li > a`
@@ -123,6 +126,20 @@ const ScrollSpy = (($) => {
         })
     }
 
+    dispose() {
+      $.removeData(this._element, DATA_KEY)
+      $(this._scrollElement).off(EVENT_KEY)
+
+      this._element       = null
+      this._scrollElement = null
+      this._config        = null
+      this._selector      = null
+      this._offsets       = null
+      this._targets       = null
+      this._activeTarget  = null
+      this._scrollHeight  = null
+    }
+
 
     // private
 
@@ -244,7 +261,7 @@ const ScrollSpy = (($) => {
    * ------------------------------------------------------------------------
    */
 
-  $(window).on(Event.LOAD, function () {
+  $(window).on(Event.LOAD_DATA_API, function () {
     let scrollSpys = $.makeArray($(Selector.DATA_SPY))
 
     for (let i = scrollSpys.length; i--;) {
diff --git a/js/src/tab.js b/js/src/tab.js
index f6b174ce2..61c062d89 100644
--- a/js/src/tab.js
+++ b/js/src/tab.js
@@ -20,15 +20,17 @@ const Tab = (($) => {
   const NAME                = 'tab'
   const VERSION             = '4.0.0'
   const DATA_KEY            = 'bs.tab'
+  const EVENT_KEY           = `.${DATA_KEY}`
+  const DATA_API_KEY        = '.data-api'
   const JQUERY_NO_CONFLICT  = $.fn[NAME]
   const TRANSITION_DURATION = 150
 
   const Event = {
-    HIDE   : 'hide.bs.tab',
-    HIDDEN : 'hidden.bs.tab',
-    SHOW   : 'show.bs.tab',
-    SHOWN  : 'shown.bs.tab',
-    CLICK  : 'click.bs.tab.data-api'
+    HIDE           : `hide${EVENT_KEY}`,
+    HIDDEN         : `hidden${EVENT_KEY}`,
+    SHOW           : `show${EVENT_KEY}`,
+    SHOWN          : `shown${EVENT_KEY}`,
+    CLICK_DATA_API : `click${EVENT_KEY}${DATA_API_KEY}`
   }
 
   const ClassName = {
@@ -146,6 +148,11 @@ const Tab = (($) => {
       }
     }
 
+    dispose() {
+      $.removeClass(this._element, DATA_KEY)
+      this._element = null
+    }
+
 
     // private
 
@@ -258,7 +265,7 @@ const Tab = (($) => {
    */
 
   $(document)
-    .on(Event.CLICK, Selector.DATA_TOGGLE, function (event) {
+    .on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (event) {
     event.preventDefault()
     Tab._jQueryInterface.call($(this), 'show')
   })
diff --git a/js/src/tooltip.js b/js/src/tooltip.js
index 1bd018c0f..42639895e 100644
--- a/js/src/tooltip.js
+++ b/js/src/tooltip.js
@@ -20,6 +20,7 @@ const Tooltip = (($) => {
   const NAME                = 'tooltip'
   const VERSION             = '4.0.0'
   const DATA_KEY            = 'bs.tooltip'
+  const EVENT_KEY           = `.${DATA_KEY}`
   const JQUERY_NO_CONFLICT  = $.fn[NAME]
   const TRANSITION_DURATION = 150
   const CLASS_PREFIX        = 'bs-tether'
@@ -52,16 +53,16 @@ const Tooltip = (($) => {
   }
 
   const Event = {
-    HIDE       : 'hide.bs.tooltip',
-    HIDDEN     : 'hidden.bs.tooltip',
-    SHOW       : 'show.bs.tooltip',
-    SHOWN      : 'shown.bs.tooltip',
-    INSERTED   : 'inserted.bs.tooltip',
-    CLICK      : 'click.bs.tooltip',
-    FOCUSIN    : 'focusin.bs.tooltip',
-    FOCUSOUT   : 'focusout.bs.tooltip',
-    MOUSEENTER : 'mouseenter.bs.tooltip',
-    MOUSELEAVE : 'mouseleave.bs.tooltip'
+    HIDE       : `hide${EVENT_KEY}`,
+    HIDDEN     : `hidden${EVENT_KEY}`,
+    SHOW       : `show${EVENT_KEY}`,
+    SHOWN      : `shown${EVENT_KEY}`,
+    INSERTED   : `inserted${EVENT_KEY}`,
+    CLICK      : `click${EVENT_KEY}`,
+    FOCUSIN    : `focusin${EVENT_KEY}`,
+    FOCUSOUT   : `focusout${EVENT_KEY}`,
+    MOUSEENTER : `mouseenter${EVENT_KEY}`,
+    MOUSELEAVE : `mouseleave${EVENT_KEY}`
   }
 
   const ClassName = {
@@ -136,6 +137,9 @@ const Tooltip = (($) => {
       return Event
     }
 
+    static get EVENT_KEY() {
+      return EVENT_KEY
+    }
 
 
     // public
@@ -182,19 +186,28 @@ const Tooltip = (($) => {
       }
     }
 
-    destroy() {
+    dispose() {
       clearTimeout(this._timeout)
-      this.hide(() => {
-        $(this.element)
-          .off(`.${this.constructor.NAME}`)
-          .removeData(this.constructor.DATA_KEY)
 
-        if (this.tip) {
-          $(this.tip).detach()
-        }
+      this.cleanupTether()
 
-        this.tip = null
-      })
+      $.removeData(this.element, this.constructor.DATA_KEY)
+
+      $(this.element).off(this.constructor.EVENT_KEY)
+
+      if (this.tip) {
+        $(this.tip).remove()
+      }
+
+      this._isEnabled      = null
+      this._timeout        = null
+      this._hoverState     = null
+      this._activeTrigger  = null
+      this._tether         = null
+
+      this.element = null
+      this.config  = null
+      this.tip     = null
     }
 
     show() {