Vuetify: [Bug Report] Tooltip hover not working on phone

Created on 1 May 2019  Â·  8Comments  Â·  Source: vuetifyjs/vuetify

Versions and Environment

Vuetify: 1.5.14
Vue: 2.6.10
Browsers: Chrome 74.0.3729.108
OS: Windows

Steps to reproduce

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 Behavior

Expected to have tool tip tapping on the elements, tool tip should disappear on tapping outside element that was activated

Actual Behavior

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.

Reproduction Link

https://codepen.io/albertb/pen/qwGegx

Other comments

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.

VTooltip bug help wanted platform specific

All 8 comments

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
}
Was this page helpful?
0 / 5 - 0 ratings