Merge branch 'v4-docs-streamlined' of https://github.com/twbs/bootstrap into v4-docs-streamlined

1 files changed, 142 insertions, 92 deletions

diff --git a/js/src/tooltip.js b/js/src/tooltip.js
index 0c1d381b9..1d53b0470 100644
--- a/js/src/tooltip.js
+++ b/js/src/tooltip.js
@@ -1,11 +1,11 @@
-/* global Tether */
+/* global Popper */
 
 import Util from './util'
 
 
 /**
  * --------------------------------------------------------------------------
- * Bootstrap (v4.0.0-alpha.5): tooltip.js
+ * Bootstrap (v4.0.0-alpha.6): tooltip.js
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  * --------------------------------------------------------------------------
  */
@@ -13,11 +13,11 @@ import Util from './util'
 const Tooltip = (($) => {
 
   /**
-   * Check for Tether dependency
-   * Tether - http://tether.io/
+   * Check for Popper dependency
+   * Popper - https://popper.js.org
    */
-  if (typeof Tether === 'undefined') {
-    throw new Error('Bootstrap tooltips require Tether (http://tether.io/)')
+  if (typeof Popper === 'undefined') {
+    throw new Error('Bootstrap tooltips require Popper.js (https://popper.js.org)')
   }
 
 
@@ -28,47 +28,50 @@ const Tooltip = (($) => {
    */
 
   const NAME                = 'tooltip'
-  const VERSION             = '4.0.0-alpha.5'
+  const VERSION             = '4.0.0-alpha.6'
   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'
-
-  const Default = {
-    animation   : true,
-    template    : '<div class="tooltip" role="tooltip">'
-                + '<div class="tooltip-inner"></div></div>',
-    trigger     : 'hover focus',
-    title       : '',
-    delay       : 0,
-    html        : false,
-    selector    : false,
-    placement   : 'top',
-    offset      : '0 0',
-    constraints : [],
-    container   : false
-  }
+  const CLASS_PREFIX        = 'bs-tooltip'
+  const BSCLS_PREFIX_REGEX = new RegExp(`(^|\\s)${CLASS_PREFIX}\\S+`, 'g')
 
   const DefaultType = {
-    animation   : 'boolean',
-    template    : 'string',
-    title       : '(string|element|function)',
-    trigger     : 'string',
-    delay       : '(number|object)',
-    html        : 'boolean',
-    selector    : '(string|boolean)',
-    placement   : '(string|function)',
-    offset      : 'string',
-    constraints : 'array',
-    container   : '(string|element|boolean)'
+    animation           : 'boolean',
+    template            : 'string',
+    title               : '(string|element|function)',
+    trigger             : 'string',
+    delay               : '(number|object)',
+    html                : 'boolean',
+    selector            : '(string|boolean)',
+    placement           : '(string|function)',
+    offset              : '(number|string)',
+    container           : '(string|element|boolean)',
+    fallbackPlacement   : '(string|array)'
   }
 
   const AttachmentMap = {
-    TOP    : 'bottom center',
-    RIGHT  : 'middle left',
-    BOTTOM : 'top center',
-    LEFT   : 'middle right'
+    AUTO   : 'auto',
+    TOP    : 'top',
+    RIGHT  : 'right',
+    BOTTOM : 'bottom',
+    LEFT   : 'left'
+  }
+
+  const Default = {
+    animation           : true,
+    template            : '<div class="tooltip" role="tooltip">'
+                        + '<div class="arrow" x-arrow></div>'
+                        + '<div class="tooltip-inner"></div></div>',
+    trigger             : 'hover focus',
+    title               : '',
+    delay               : 0,
+    html                : false,
+    selector            : false,
+    placement           : 'top',
+    offset              : 0,
+    container           : false,
+    fallbackPlacement   : 'flip'
   }
 
   const HoverState = {
@@ -99,11 +102,6 @@ const Tooltip = (($) => {
     TOOLTIP_INNER : '.tooltip-inner'
   }
 
-  const TetherClass = {
-    element : false,
-    enabled : false
-  }
-
   const Trigger = {
     HOVER  : 'hover',
     FOCUS  : 'focus',
@@ -123,12 +121,11 @@ const Tooltip = (($) => {
     constructor(element, config) {
 
       // private
-      this._isEnabled        = true
-      this._timeout          = 0
-      this._hoverState       = ''
-      this._activeTrigger    = {}
-      this._isTransitioning  = false
-      this._tether           = null
+      this._isEnabled     = true
+      this._timeout       = 0
+      this._hoverState    = ''
+      this._activeTrigger = {}
+      this._popper        = null
 
       // protected
       this.element = element
@@ -220,8 +217,6 @@ const Tooltip = (($) => {
     dispose() {
       clearTimeout(this._timeout)
 
-      this.cleanupTether()
-
       $.removeData(this.element, this.constructor.DATA_KEY)
 
       $(this.element).off(this.constructor.EVENT_KEY)
@@ -235,7 +230,10 @@ const Tooltip = (($) => {
       this._timeout       = null
       this._hoverState    = null
       this._activeTrigger = null
-      this._tether        = null
+      if (this._popper !== null) {
+        this._popper.destroy()
+      }
+      this._popper        = null
 
       this.element = null
       this.config  = null
@@ -249,9 +247,6 @@ const Tooltip = (($) => {
 
       const showEvent = $.Event(this.constructor.Event.SHOW)
       if (this.isWithContent() && this._isEnabled) {
-        if (this._isTransitioning) {
-          throw new Error('Tooltip is transitioning')
-        }
         $(this.element).trigger(showEvent)
 
         const isInTheDom = $.contains(
@@ -280,35 +275,54 @@ const Tooltip = (($) => {
           this.config.placement
 
         const attachment = this._getAttachment(placement)
+        this.addAttachmentClass(attachment)
 
         const container = this.config.container === false ? document.body : $(this.config.container)
 
-        $(tip)
-          .data(this.constructor.DATA_KEY, this)
-          .appendTo(container)
+        $(tip).data(this.constructor.DATA_KEY, this)
+
+        if (!$.contains(this.element.ownerDocument.documentElement, this.tip)) {
+          $(tip).appendTo(container)
+        }
 
         $(this.element).trigger(this.constructor.Event.INSERTED)
 
-        this._tether = new Tether({
-          attachment,
-          element         : tip,
-          target          : this.element,
-          classes         : TetherClass,
-          classPrefix     : CLASS_PREFIX,
-          offset          : this.config.offset,
-          constraints     : this.config.constraints,
-          addTargetClasses: false
+        this._popper = new Popper(this.element, tip, {
+          placement : attachment,
+          modifiers : {
+            offset : {
+              offset : this.config.offset
+            },
+            flip : {
+              behavior : this.config.fallbackPlacement
+            }
+          },
+          onCreate : (data) => {
+            if (data.originalPlacement !== data.placement) {
+              this._handlePopperPlacementChange(data)
+            }
+          },
+          onUpdate : (data) => {
+            this._handlePopperPlacementChange(data)
+          }
         })
 
-        Util.reflow(tip)
-        this._tether.position()
-
         $(tip).addClass(ClassName.SHOW)
 
+        // 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) {
+          $('body').children().on('mouseover', null, $.noop)
+        }
+
         const complete = () => {
+          if (this.config.animation) {
+            this._fixTransition()
+          }
           const prevHoverState = this._hoverState
-          this._hoverState   = null
-          this._isTransitioning = false
+          this._hoverState     = null
 
           $(this.element).trigger(this.constructor.Event.SHOWN)
 
@@ -318,32 +332,29 @@ const Tooltip = (($) => {
         }
 
         if (Util.supportsTransitionEnd() && $(this.tip).hasClass(ClassName.FADE)) {
-          this._isTransitioning = true
           $(this.tip)
             .one(Util.TRANSITION_END, complete)
             .emulateTransitionEnd(Tooltip._TRANSITION_DURATION)
-          return
+        } else {
+          complete()
         }
-
-        complete()
       }
     }
 
     hide(callback) {
       const tip       = this.getTipElement()
       const hideEvent = $.Event(this.constructor.Event.HIDE)
-      if (this._isTransitioning) {
-        throw new Error('Tooltip is transitioning')
-      }
       const complete  = () => {
         if (this._hoverState !== HoverState.SHOW && tip.parentNode) {
           tip.parentNode.removeChild(tip)
         }
 
+        this._cleanTipClass()
         this.element.removeAttribute('aria-describedby')
         $(this.element).trigger(this.constructor.Event.HIDDEN)
-        this._isTransitioning = false
-        this.cleanupTether()
+        if (this._popper !== null) {
+          this._popper.destroy()
+        }
 
         if (callback) {
           callback()
@@ -358,13 +369,19 @@ const Tooltip = (($) => {
 
       $(tip).removeClass(ClassName.SHOW)
 
+      // if this is a touch-enabled device we remove the extra
+      // empty mouseover listeners we added for iOS support
+      if ('ontouchstart' in document.documentElement) {
+        $('body').children().off('mouseover', null, $.noop)
+      }
+
       this._activeTrigger[Trigger.CLICK] = false
       this._activeTrigger[Trigger.FOCUS] = false
       this._activeTrigger[Trigger.HOVER] = false
 
       if (Util.supportsTransitionEnd() &&
           $(this.tip).hasClass(ClassName.FADE)) {
-        this._isTransitioning = true
+
         $(tip)
           .one(Util.TRANSITION_END, complete)
           .emulateTransitionEnd(TRANSITION_DURATION)
@@ -374,8 +391,14 @@ const Tooltip = (($) => {
       }
 
       this._hoverState = ''
+
     }
 
+    update() {
+      if (this._popper !== null) {
+        this._popper.scheduleUpdate()
+      }
+    }
 
     // protected
 
@@ -383,18 +406,18 @@ const Tooltip = (($) => {
       return Boolean(this.getTitle())
     }
 
+    addAttachmentClass(attachment) {
+      $(this.getTipElement()).addClass(`${CLASS_PREFIX}-${attachment}`)
+    }
+
     getTipElement() {
       return this.tip = this.tip || $(this.config.template)[0]
     }
 
     setContent() {
       const $tip = $(this.getTipElement())
-
       this.setElementContent($tip.find(Selector.TOOLTIP_INNER), this.getTitle())
-
       $tip.removeClass(`${ClassName.FADE} ${ClassName.SHOW}`)
-
-      this.cleanupTether()
     }
 
     setElementContent($element, content) {
@@ -425,12 +448,6 @@ const Tooltip = (($) => {
       return title
     }
 
-    cleanupTether() {
-      if (this._tether) {
-        this._tether.destroy()
-      }
-    }
-
 
     // private
 
@@ -603,6 +620,14 @@ const Tooltip = (($) => {
         }
       }
 
+      if (config.title && typeof config.title === 'number') {
+        config.title = config.title.toString()
+      }
+
+      if (config.content && typeof config.content === 'number') {
+        config.content = config.content.toString()
+      }
+
       Util.typeCheckConfig(
         NAME,
         config,
@@ -626,6 +651,31 @@ const Tooltip = (($) => {
       return config
     }
 
+    _cleanTipClass() {
+      const $tip = $(this.getTipElement())
+      const tabClass = $tip.attr('class').match(BSCLS_PREFIX_REGEX)
+      if (tabClass !== null && tabClass.length > 0) {
+        $tip.removeClass(tabClass.join(''))
+      }
+    }
+
+    _handlePopperPlacementChange(data) {
+      this._cleanTipClass()
+      this.addAttachmentClass(this._getAttachment(data.placement))
+    }
+
+    _fixTransition() {
+      const tip                 = this.getTipElement()
+      const initConfigAnimation = this.config.animation
+      if (tip.getAttribute('x-placement') !== null) {
+        return
+      }
+      $(tip).removeClass(ClassName.FADE)
+      this.config.animation = false
+      this.hide()
+      this.show()
+      this.config.animation = initConfigAnimation
+    }
 
     // static