Skip to content

fix(VTooltip): correct pointer-events selector for non-interactive tooltips#22726

Closed
Bingtagui404 wants to merge 1 commit intovuetifyjs:masterfrom
Bingtagui404:fix/tooltip-pointer-events
Closed

fix(VTooltip): correct pointer-events selector for non-interactive tooltips#22726
Bingtagui404 wants to merge 1 commit intovuetifyjs:masterfrom
Bingtagui404:fix/tooltip-pointer-events

Conversation

@Bingtagui404
Copy link
Copy Markdown

Fixes #22724.

Problem

Non-interactive tooltips do not disappear on mouseover since v4.0.2. The tooltip always behaves as if :interactive="true".

Root Cause

In VTooltip.sass, the pointer-events: none rule for non-interactive tooltips used incorrect SASS nesting:

.v-tooltip > .v-overlay__content
  &:not(.v-tooltip--interactive)
    > .v-overlay__content
      pointer-events: none

The & resolves to .v-overlay__content, producing the CSS selector:

.v-tooltip > .v-overlay__content:not(.v-tooltip--interactive) > .v-overlay__content

This never matches because:

  1. .v-tooltip--interactive is applied to .v-tooltip (the root), not .v-overlay__content
  2. .v-overlay__content does not contain a nested .v-overlay__content

Fix

Move the rule out of the nested block so :not() targets .v-tooltip:

.v-tooltip:not(.v-tooltip--interactive) > .v-overlay__content
  pointer-events: none

This produces the correct CSS:

.v-tooltip:not(.v-tooltip--interactive) > .v-overlay__content {
  pointer-events: none;
}

The rule sits in tools.layer('overrides'), which correctly overrides the pointer-events: auto from VOverlay.sass in tools.layer('components').

…oltips

The :not(.v-tooltip--interactive) was incorrectly nested under
.v-tooltip > .v-overlay__content, causing the & to resolve to
.v-overlay__content instead of .v-tooltip. This produced a selector
that never matched any DOM element, so pointer-events: none was
never applied to non-interactive tooltips.

Move the rule out of the nested block so that :not() targets the
.v-tooltip root element, producing the correct selector:
.v-tooltip:not(.v-tooltip--interactive) > .v-overlay__content

Fixes vuetifyjs#22724
@KaelWD KaelWD closed this in 15b3cbd Mar 18, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug Report][4.0.2] Tooltips do not disappear on mouseover since v4

1 participant