Make tooltips work on iOS by using touch events and ignoring mouse events

tooltip.js

;(function ($) {
  var wasTapped = function wasTapped (element) {
    var touchStart = element.data('lastTouchStart')
    var touchEnd = element.data('lastTouchEnd')
    return (
      touchStart && touchEnd &&
      touchEnd.timeStamp - touchStart.timeStamp <= 500 &&   // duration
      Math.abs(touchEnd.pageX - touchStart.pageX) <= 10 &&  // deltaX
      Math.abs(touchEnd.pageY - touchStart.pageY) <= 10     // deltaY
    )
  }

  var initTooltip = function initTooltip () {
    $('[data-toggle="tooltip"]').tooltip({trigger: 'manual'})
    .on('show.bs.tooltip', function () {
      $(this).data('tooltipShown', true)
    })
    .on('hide.bs.tooltip', function () {
      $(this).data('tooltipShown', false)
    })
    .on('touchstart', function (e) {
      var $this = $(this)
      $this.data({
        lastTouchStart: e.originalEvent,
        wasTouchedRecently: true
      })
      setTimeout(function () {
        $this.data('wasTouchedRecently', false)
      }, 300)
    })
    .on('touchend', function (e) {
      e.preventDefault()
      var $this = $(this)
      $this.data({
        lastTouchEnd: e.originalEvent,
        wasTouchedRecently: true
      })
      setTimeout(function () {
        $this.data('wasTouchedRecently', false)
      }, 300)

      if (wasTapped($this))
        $this.tooltip('toggle')
    })
    .on('mouseenter', function () {
      var $this = $(this)
      if (!$this.data('wasTouchedRecently'))
        $this.tooltip('show')
    })
    .on('mouseleave', function () {
      var $this = $(this)
      if (!$this.data('wasTouchedRecently'))
        $this.tooltip('hide')
    })

    $('body')
    .on('touchstart', function (e) {
      $(this).data('lastTouchStart', e.originalEvent)
    })
    .on('touchend', function (e) {
      var $body = $(this)
      $body.data('lastTouchEnd', e.originalEvent)

      $('[data-toggle="tooltip"]').each(function () {
        var $tooltip = $(this)
        var target = $tooltip.closest('[data-toggle="tooltip"]').get(0)

        if ($tooltip.data('tooltipShown')
          && e.target !== target && wasTapped($body)) {
          e.preventDefault()
          $tooltip.tooltip('hide')
        }
      })
    })
  }

  $(initTooltip)
})(jQuery);