Vuetify: [Bug Report] Tooltip inside nav-drawer inside fullscreen dialog hides behind dialog

Created on 31 Oct 2018  路  2Comments  路  Source: vuetifyjs/vuetify

Versions and Environment

Vuetify: 1.3.4
Vue: 2.5.17
Browsers: Chrome 70.0.3538.77
OS: Windows 10

Steps to reproduce

Place a tooltip inside a nav-drawer inside a fullscreen dialog

Expected Behavior

Tooltip is visible

Actual Behavior

Tooltip is _not_ visible

Reproduction Link

https://codepen.io/mrodal/pen/rqEQXO?editors=1010

Other comments

tha tooltip gets z-index 8, and the dialog is 202

VNavigationDrawer VTooltip bug

Most helpful comment

Short version:

For anyone with this problem, @johnleider recommended waiting for 2.0 since there will be major changes in the logic that determines the z-index and the layout in general, so a workaround for now that worked for me is setting z-index: inherit on the nav drawer

Long version:

ladorm Today at 1:11 PM
hi guys, im thinking of making a PR for this https://github.com/vuetifyjs/vuetify/issues/5494 , but first I want to see what you think of what I think can solve the issue
the problem seems to be that the nav drawer doesnt inherit from the stackable mixin, so it has a fixed z-index, and when the tooltip and the select menu uses the stackable getMaxZIndex, it finds the nav drawer as the closest parent with z-index, and uses that one, which is smaller than the one from the dialog

johnleider Today at 1:13 PM
this is because tooltips aren't part of stackable
and that logic is being moved into a service for 2.0 to better handle various layouts. With that being said, I'm undecided on how tooltip fits into this

ladorm Today at 1:13 PM
they are actually, they are menuable, and menuable is stackable

johnleider Today at 1:14 PM
sorry, dependent
stackable/dependent
can work in tandem
at least I think

ladorm Today at 1:16 PM
but for both the tooltip and the select menu, the getMaxZIndex gets called and that z-index gets set on them
and its taking the fixed small z-index from the nav drawer

johnleider Today at 1:16 PM
Well, regardless of how it is setup, that is all moving to the core
so the framework can keep track of it
and remove the dom crawling

ladorm Today at 1:17 PM
ok, so should I skip making a pr then and try to find a workarond for now?

johnleider Today at 1:17 PM
I would say skip it for now

All 2 comments

The same happens with selects. I updated the codepen

Short version:

For anyone with this problem, @johnleider recommended waiting for 2.0 since there will be major changes in the logic that determines the z-index and the layout in general, so a workaround for now that worked for me is setting z-index: inherit on the nav drawer

Long version:

ladorm Today at 1:11 PM
hi guys, im thinking of making a PR for this https://github.com/vuetifyjs/vuetify/issues/5494 , but first I want to see what you think of what I think can solve the issue
the problem seems to be that the nav drawer doesnt inherit from the stackable mixin, so it has a fixed z-index, and when the tooltip and the select menu uses the stackable getMaxZIndex, it finds the nav drawer as the closest parent with z-index, and uses that one, which is smaller than the one from the dialog

johnleider Today at 1:13 PM
this is because tooltips aren't part of stackable
and that logic is being moved into a service for 2.0 to better handle various layouts. With that being said, I'm undecided on how tooltip fits into this

ladorm Today at 1:13 PM
they are actually, they are menuable, and menuable is stackable

johnleider Today at 1:14 PM
sorry, dependent
stackable/dependent
can work in tandem
at least I think

ladorm Today at 1:16 PM
but for both the tooltip and the select menu, the getMaxZIndex gets called and that z-index gets set on them
and its taking the fixed small z-index from the nav drawer

johnleider Today at 1:16 PM
Well, regardless of how it is setup, that is all moving to the core
so the framework can keep track of it
and remove the dom crawling

ladorm Today at 1:17 PM
ok, so should I skip making a pr then and try to find a workarond for now?

johnleider Today at 1:17 PM
I would say skip it for now

Was this page helpful?
0 / 5 - 0 ratings

Related issues

alterhu2020 picture alterhu2020  路  3Comments

efootstep picture efootstep  路  3Comments

dohomi picture dohomi  路  3Comments

dschreij picture dschreij  路  3Comments

Antway picture Antway  路  3Comments