Tippyjs: Disbale on touch devices

[khanamiryan]

Hi, i need to disable showing on touch events. Is it possible?

[atomiks]

I don't think it's really possible to determine accurately, given the existence of hybrid devices (mouse + touch input).

I think this might be the most reliable way (for iOS and Android –– I think MS Surface devices, for example, don't use the touch API):

const tip = tippy('selector')

document.addEventListener('touchstart', function handler() {
  tip.destroyAll()
  document.removeEventListener('touchstart', handler)
})

So on touchstart (confirmed they are using touch input), destroy all the tooltips that were created. However if they switch back to using mouse (a hybrid device), the tooltips will be gone.

So it's kinda tricky.

[atomiks]

If you want to get more advanced (in fact, I do this in the library to determine if the user is currently using touch input, dynamicInputDetection), this is a technique I came up with.

The idea is to set some variable flag to true (isUsingTouch) if they are currently using a touch input. If they switch back to mouse (aka mousemove) set that variable back to false. This is only done if two consecutive mousemove events are less than 20ms apart (which means with almost certainty that they are using a real mouse and not a simulated mousemove from a touch device). This means it's dynamic and changing and needs to be constantly listening.

let isUsingTouch = false

const touchHandler = () => {
  isUsingTouch = true

  if (browser.dynamicInputDetection) {
    document.addEventListener('mousemove', mousemoveHandler)
  }
}

const mousemoveHandler = (() => {
  let time

  return () => {
    const now = performance.now()

    // Chrome 60+ is 1 mousemove per rAF, use 20ms time difference
    if (now - time < 20) {
      isUsingTouch = false
      document.removeEventListener('mousemove', mousemoveHandler)
    }

    time = now
  }
})()

document.addEventListener('touchstart', touchHandler)

// For touch devices that don't support the Touch API
if (!browser.supportsTouch && (navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0)) {
  document.addEventListener('pointerdown', touchHandler)
}

So with this technique you could add the tooltip creation inside the listener for mousemove and tooltip destruction inside the touch handler.

But it's pretty complicated, so eh..

[atomiks]

Closing unless someone has a better idea of how to disable for touch devices

[RJFares]

@atomiks I see the library is already using "tippy.currentInput.isTouch". Since this post was closed in 2017, was anything changed in regards to this?
I also want to disable tooltip on touch devices (currently it's opening the modal AND showing tooltips overlapping on touch devices).

[atomiks]

touch: false