Vuetify: [Bug Report] Incorrect tooltip behavior with some components

Created on 21 Aug 2019  路  8Comments  路  Source: vuetifyjs/vuetify

Environment

Vuetify Version: 2.0.7
Vue Version: 2.6.10
Browsers: Chrome 76.0.3809.100
OS: Linux x86_64

Steps to reproduce

  • add a Vuetify component which would make sense with a tooltip, like v-select or v-fileinput
  • wrap it in a <v-tooltip> to add a tooltip
  • hover on the component

Expected Behavior

The tooltip should appear on hover

Actual Behavior

For some components, the tooltip does not appear, or incorrectly (see comments)

Reproduction Link

https://codepen.io/tomparle/pen/ymKGxp

Other comments

I have only tested components that would make sense with a tooltip, excluding core or abstract components such as v-app, v-bottom-sheet or v-divider.
When a component is OK, then the tooltip works properly.
When NOK, the tooltip usually just does not appear on hover.

Alert : NOK
Avatar : OK
Badge : NOK
Banner : NOK
Button : OK
Card : OK
Chip : OK
Icon : OK
Image : OK

--- Form components ---
Autocomplete : OK
Combobox : OK
FileInput : NOK (only appears briefly on click, then disappears because of the file input dialog displayed instead.The tooltip should appear on hover instead)
Overflow buttons : OK
Select : NOK (appears on click then disappears, instead of hover)
Checkbox : NOK (the tooltip is working only on the checkbox itself but not on its label as I would expect)
Radio button : NOK (tooltip working only on the radio circle but not on its label)
Switch : NOK (working on the slider but not on its label)
Slider : NOK (tooltip appears when clicking on the slider, instead of hovering)
TextArea : OK
TextField : OK

Progress circular : OK
Progress Linear : OK, but slight bottom offset where tooltip does not appear if hovering on the very bottom of the progress bar (more visible with a large height)
Rating : NOK
Sheet : OK
Sparkline : NOK (suggestion : it may appear when hovering the line itself)
Tabs : OK
Timeline item : NOK (it may appear when hovering the timeline item dot)

VTooltip Framework bug has workaround

Most helpful comment

I want to put in a plug for addressing this issue. It's really bad to say "there's a workaround" when potentially thousands of developers run into the sames issues over and over, and have to spend thousands of hours googling. Not to mention the importance of consistency in a code base. That also saves a ton of time as some other developer looking at the workaround doesn't need to wonder "why does this code look weird?".

All 8 comments

8387 was fixed but then reverted, not sure what "the implications of this change" are.

I, too, wanted to use v-checkbox in combination with v-tooltip and followed the workaround in #8387 which adds a div around the complete checkbox and use a hover over the div as a trigger for the tooltip. This, however, causes another issue. The div wrapping the checkbox might sometimes be much wider than the checkbox and it's label. This causes the tooltip to pop-up when the user hoovers blank space.

I found another workaround for this issue which solves the div-problem. Provide the label itself using the label-slot on a v-checkbox with a v-on=on event (you also need to retain the v-on-event on the v-checkbox itself).

Example:

<v-tooltip top>
  <template v-slot:activator="{ on }">
    <v-checkbox v-on="on" :disabled="disabled" v-model="model" hide-details>
      <span slot="label" v-on="on">Foo</span>
    </v-checkbox>
  </template>
  <span>Bar</span>
</v-tooltip>

@pverscha , thank you for your input.
I had also tested the checkbox in my initial post, with the description the tooltip is working only on the checkbox itself but not on its label as I would expect.
But your code may be useful to quickly reproduce the issue I guess !

This is an issue of other components not binding listeners properly rather than something wrong with tooltips in particular. The usual workaround is to wrap the target component in another element, which is what the old non-scoped activator slot did. class="d-inline-block" may help with layout problems.

This is an issue of other components not binding listeners properly rather than something wrong with tooltips in particular. The usual workaround is to wrap the target component in another element, which is what the old non-scoped activator slot did. class="d-inline-block" may help with layout problems.

Thank you for the feedback !
What I find misleading is that it works out-of-the-box for some components (button, card, chip...) but needs wrapping for others. If tooltipping is not fixed for such components, maybe their documentation should be updated to mention it ?

Have recently discovered this bug with badges, and have so far found no valid work around.

My use case is a button which becomes disabled, but requires a tooltip to indicate why it is disabled.

I am unable to wrap the button in a div (for the tooltip) as it is part of a button group, so it wrecks the styling.

My approach became put a locked badge on the button, then a tooltip on the badge, but it doesn't produce the tooltip.

I was more surprised to find it doesn't even work if you use the 'badge' slot for the badge component.

    <v-btn-toggle>
      <v-badge :value="buttonDisabled">
        <template slot="badge">
          <v-tooltip>
            <template v-slot:activator="{ on }">
              <v-icon v-on="on">fa-lock</v-icon>
            </template>
            <span>I'm a tooltip</span>
          </v-tooltip>
        </template>

        <v-btn @disabled="buttonDisabled">
          Button
        </v-btn>
      </v-badge>
    </v-btn-toggle>

I want to put in a plug for addressing this issue. It's really bad to say "there's a workaround" when potentially thousands of developers run into the sames issues over and over, and have to spend thousands of hours googling. Not to mention the importance of consistency in a code base. That also saves a ton of time as some other developer looking at the workaround doesn't need to wonder "why does this code look weird?".

Was this page helpful?
0 / 5 - 0 ratings

Related issues

aaronjpitts picture aaronjpitts  路  3Comments

gluons picture gluons  路  3Comments

SteffenDE picture SteffenDE  路  3Comments

KuroThing picture KuroThing  路  3Comments

smousa picture smousa  路  3Comments