tooltips with option { trigger: 'manual' } close on touch event anywhere on the page

[sebastiankienzl]

Here is a jsFiddle that reproduces the bug/unexpected behavior: https://jsfiddle.net/sebastiankienzl/g4mo2cv9/

I want to show a tooltip and only close it after a user has interacted with the element it is supposed to give a hint on. For this, I use the v-tooltip directive on an <input>-element with trigger: 'manual' and controll it via a variable in the data of a Vue-Instance. click- and focus-handlers in the <input>-element trigger a function that hides the tooltip. This is a short version of the code:

Template

<input
         type="text"
         maxlength="10"
         @focus="hideTooltip"
         @click="hideTooltip"
         ref="input"
         v-tooltip="{
             content: 'My content.',
             show: showTooltip,
             trigger: 'manual',
             placement: 'bottom',
             offset: 2,
         }">
</input>

JS

new Vue({
  el: "#app",
  data: {
    showTooltip: true,
  },
  methods: {
    hideTooltip() {
    	this.showTooltip = false
    }
  }
})

This works on desktop-browsers but on a phone (and in the device emulator in Chrome), the tooltip closes as soon as any touch event happens on the page. Is this intentional and if so, can I somehow circumvent this?

[towry]

Had the same issue, strange behavior, there seems no option to disable this behavior.

I modified the source code to add an option to disable such behavior.

directives/v-tooltip.js

export const defaultOptions = {
    // ...
    defaultPersist: false,
}
// ...
export function getOptions (options) {
   const result = {
      // ...
      persist: typeof options.persist !== 'undefined' ? options.persist : directive.options.defaultPersist,
   }
}

// lib/tooltip.js

document.addEventListener('touchstart', event => {
		for (let i = 0; i < openTooltips.length; i++) {
			if (!openTooltips[i].options.persist) {
				openTooltips[i]._onDocumentTouch(event)
			}
		}
	}, supportsPassive ? {
        // ...

Usage

<div v-tooltip="{'persist': true}"></div>