Skip to content

fix: #22345 V-tooltip directive null or false value #22347

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
+1 −1
Open

fix: #22345 V-tooltip directive null or false value #22347

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/vuetify/src/directives/tooltip/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export interface TooltipDirectiveBinding extends Omit<DirectiveBinding<string>,

export const Tooltip = useDirectiveComponent<TooltipDirectiveBinding>(VTooltip, binding => {
return {
activator: 'parent',
activator: (binding.value === null || binding.value === false) ? null : 'parent',
Copy link
Member

@userquin userquin Nov 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cannot be simplified to this? binding.value ? 'parent' : null

Copy link
Contributor Author

@Haviles04 Haviles04 Nov 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was intentional, the default behaviors is that if you don't pass a value the tooltip will use whatever value the component has so if you have a button that says 'hello' the tooltip will also say 'hello'

I wanted to leave a way for that behavior to still work. But if you intentionally did not want to show it you could pass null or false

Copy link
Member

@userquin userquin Nov 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

add a comment or maybe change it to (anyone just checking the code can change it):

  • (binding.value === undefined || binding.value === true) ? 'parent': null or
  • (typeof binding.value === 'undefined' || binding.value === true) ? 'parent': null

Copy link
Member

@userquin userquin Nov 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

arggg: add a comment ;)

Copy link
Contributor

@J-Sek J-Sek Nov 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can get undefined, null, boolean, string or object
I think we don't want to show the tooltip for false, null and the empty string.

Copy link
Contributor

@J-Sek J-Sek Nov 20, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Anyone against?

const textOrValue = isObject(binding.value) ? binding.value.text : binding.value
const disabled = ['', false, null].includes(textOrValue) // intentionally excluding undefined
return {
  activator: disabled ? null : 'parent',
  //...
}

Copy link
Contributor

@J-Sek J-Sek Nov 20, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated to avoid showing [Object object] when there is no text field (e.g. v-tooltip='{}').

const disabled = isObject(binding.value)
  ? !binding.value.text
  : ['', false, null].includes(binding.value) // undefined means true
return {
  activator: disabled ? null : 'parent',
  //...
}

location: binding.arg?.replace('-', ' '),
text: typeof binding.value === 'boolean' ? undefined : binding.value,
}
Expand Down