Vuetify: [Bug Report] Tooltip with Menu on Touch Device

Created on 4 Sep 2020  路  4Comments  路  Source: vuetifyjs/vuetify

Environment

Vuetify Version: 2.3.10
Vue Version: 2.6.11
Browsers: Chrome 85.0.4183.83
OS: Windows 10

Steps to reproduce

  1. Turn on Chrome DevTool
  2. Toggle Device Toolbar to simulate a touch device
  3. Go to the reproduction link or refresh the reproduction link (important, otherwise not reproducible)
  4. Click the button
  5. Tooltip and menu show at the same time

Expected Behavior

Only the menu should show

Actual Behavior

Both tooltip and menu show on top of each other

Reproduction Link

https://codepen.io/gaosong2101/pen/QWNOOow

Other comments

similar behaviour can be also observed at https://vuetifyjs.com/en/components/menus/#menu-with-activator-and-tooltip

VMenu VTooltip triage

All 4 comments

Thank you for the workaround.

Just wondering, is this going to be fixed on the vuetify side, or we have to use this workaround for all these cases where tooltip and menu are used together?

It might be fixed in Vuetify but hard to say when, I suppose you may need to wait for 3.x
For now I suggest creating a wrapper component for menu+tooltip

from my finding
it was fine up to 2.1.2

contain this problem but subtle because tooltip z-index is behind
from 2.1.3 to 2.2.8

contain this problem and it quite obvious because tooltip come to front
from 2.2.9 to 2.3.10

Was this page helpful?
0 / 5 - 0 ratings