vue.jsvuejs3vuetify.jsvuetifyjs3

How to place a v-tooltip inside a label in a v-text-field?

I am trying to put a v-tooltip inside a persistent label in a v-text-field but it is not functioning. The tooltip shows up next to the label but nothing happens when I hover my mouse over it, it should show the text "Test popup text" when hovering it. Small example: Link to vuetify playground.

I have tried to move around things, wrap it etc but nothing seem to work.

Questions

  1. Can I have a tooltip inside my label like that and working?
  2. How can I change my code to get it to work?
Solution

  • Because the pointer-events of the input label is set as none by vuetify.

    You can override it to make the elements in the label hoverable:

    <style>
  .v-label.v-field-label.v-field-label--floating {
    pointer-events: auto;
  }
</style>

    Playground