Skip to content
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.

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

[Bug Report][3.5.2] VTooltip Renders Empty background when no text is passed #20835

Closed
tbenyon opened this issue Jan 4, 2025 · 4 comments
Closed
Labels
layer 8 issue T: enhancement Functionality that enhances existing features

Comments

@tbenyon
Copy link

tbenyon commented Jan 4, 2025

Environment

Vuetify Version: 3.5.2
Vue Version: 3.5.13
Browsers: Chrome 131.0.0.0
OS: Mac OS 10.15.7

Steps to reproduce

  1. Create a VTooltip
  2. Pass empty string OR undefined in "text" prop
<v-tooltip text="">
  <template v-slot:activator="{ props }">
    <v-btn v-bind="props">Hover Over Me</v-btn>
  </template>
</v-tooltip>

Expected Behavior

The tooltip would not render at all.

Actual Behavior

The tool tip background renders with no content.

Reproduction Link

https://play.vuetifyjs.com/#...

Other comments

This is arguably a feature but feels more like a bug to me as I believe this was likely the expected behaviour.

Working around to hide/show tooltip in different situations is messy and is far less intuitive.

@MatthewAry MatthewAry added T: enhancement Functionality that enhances existing features layer 8 issue labels Jan 7, 2025
@github-actions github-actions bot removed the S: triage label Jan 7, 2025
@MatthewAry
Copy link
Contributor

MatthewAry commented Jan 7, 2025

This is a feature request, or rather an enhancement that you're requesting. However some might argue that it's working correctly because you could just add disabled prop to the tooltip if there is no contents for it to render.

My stance is this, its fine the way it is.

  1. There is a workaround
  2. A developer who sees this will be able to fix it. Possibly by removing the unneeded tooltip (perf)
  3. It keeping this will help developers make better software because the component will communicate to the dev that they forgot to add a text to the tooltip.

I'll leave this open for other core team members to weigh in, but I think this issue is going to get closed.

@tbenyon
Copy link
Author

tbenyon commented Jan 7, 2025

Hey @MatthewAry,

I understand where you're coming from regarding bug/feature as I was on the fence.

The reason I swayed towards bug, and in response to answer 2, removing the tool tip is not a great option if you want a tooltip to be dynamic. In my case I wanted a button that only had a tool tip when disabled.

This was my workaround of which I would welcome someone sharing a better solution if I'm being stupid:

<template>
  <v-tooltip
    v-if="computedToolTipText"
    :text="computedToolTipText"
    :location="toolTipLocation"
  >
    <template v-slot:activator="{ props }">
      <span v-bind="{ ...props, ...$attrs }" @click="handleClick">
        <v-btn v-bind="buttonProps">
          <slot />
        </v-btn>
      </span>
    </template>
  </v-tooltip>
  <v-btn v-else v-bind="buttonProps" @click="handleClick">
    <slot />
  </v-btn>
</template>

Note that in this approach I had to duplicate the content within a v-else which is not 'DRY'.

If my proposal to have the tooltip background hide when the value is false || undefined maybe an alternative would simply be another prop called "hide" that when truthy hides the tooltip. This would help with your point 3 though I'm not sure I really agree with this point as a reason. I would describe this as unexpected behaviour and not a reason to help devs with an easily debugged edge case issue they might face.

To respond to point 1 - you are right, there almost always is, however the workaround is messy and I believe it still to be unintuitive behaviour.

@MatthewAry
Copy link
Contributor

Did you try using a the disable prop instead?

@tbenyon
Copy link
Author

tbenyon commented Jan 8, 2025

I read through the props looking for one like this previously and did not spot that which is frustrating.

This solves the issue just fine, don't know how I read passed that one.

Thank you @MatthewAry -> closing.

@tbenyon tbenyon closed this as completed Jan 8, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
layer 8 issue T: enhancement Functionality that enhances existing features
Projects
None yet
Development

No branches or pull requests

2 participants