Vuetify: 1.5.14
Vue: 2.6.10
Browsers: Chrome 74.0.3729.108
OS: Windows
Open the pen code with vue and vuetify imported on the phone (i use iphone) (https://codepen.io/albertb/pen/qwGegx)
or start basic vue app and install vuetify take first tool tip code example from vuetify official docs (https://vuetifyjs.com/en/components/tooltips#tooltip) paste it to your code and open on the phone.
Expected to have tool tip tapping on the elements, tool tip should disappear on tapping outside element that was activated
Only first element button have effect on tap, but tool tip does not disappear on tapping outside with the phone, ,another elements dont show tool tip.
https://codepen.io/albertb/pen/qwGegx
When i open vuetify docs with the phone, that demo is working i can click every icon and effect is working.
Also i added programmatic icon example to code pen , whish is showing that element wrapped in the button is showing tooltip but tapping outside gives no effect.
what is super weird, is if i add to template https://vuetifyjs.com/en/components/floating-action-buttons#buttons-floating-action-button floating action button , hover on icons is working aswell without any changes... is its something with <template v-slot:activator> vs <template v-slot:activator="{ on }"> on tool tip ?
Works fine on android
Does Safari emulate hover on tap or do you need to hold it?
Its not working on the iphone with chrome or safari.
Hover effect on vuetify and floating action button works perfect on tap, long tap is selecting icon as a text.
As I said before adding to page layout floating action button is solving this issue which I cannot understand why, if I take floating action button out, same problem appears , might be some issue with ‘slot activator’ ?
You mean if you have a FAB then the hover works on other elements too?
Exactly
we have same issue on IOS, what is workaround ? Adding v-card as parent object did not help
Same problem, menu/tooltip hover never closes, unless the touchend is on v-card... Looking at what's happening none of the close events for the activator button are firing - 'blur', 'mouseout', 'touchleave'.
A workaround is to detect if you are on a touch screen and use open-on-click in that instance.
<v-menu
:open-on-hover="!touch"
>
...
</v-menu>
beforeMount() {
this.touch = matchMedia('(hover: none), (pointer: coarse)').matches
}