CODEWITHSUNDEEP
vuejs2vuetify.js
Author
Author

Reputation: 163

How do I enable tooltips on a disabled text-field in vuetify?

The code shows the tooltip icon but does not show anything when I hover on it.How do I enable it on hover like in the case of number below.

https://vuetifyjs.com/en/components/tooltips

<v-text-field label="Name" id="name" disabled>
    <v-tooltip slot="append" :value="true" bottom>
        <v-icon slot="activator" color="primary" dark>live_help</v-icon>
        <span>Name of the user</span>
    </v-tooltip>
</v-text-field>

<v-text-field label="number" id="number">
     <v-tooltip slot="append" bottom>
          <v-icon slot="activator" color="primary" dark>live_help</v-icon>
          <span> Number of years</span>
     </v-tooltip>
</v-text-field>

Upvotes: 2

Views: 6298

Answers (1)

Syed Aslam
Syed Aslam

Reputation: 8807

Vuetify disables all pointer events for disabled input fields:

.v-input--is-disabled:not(.v-input--is-readonly) {
    pointer-events: none;
}

Two ways to remove this:

  1. You add a custom class to this input where you say pointer-events: auto or
  2. You pass the readonly prop to the component so that Vuetify adds v-input--is-readonly class which removes the pointer-events: none condition automatically.

So, your input definition becomes:

<v-text-field label="Name" id="name" disabled readonly>
    <v-tooltip slot="append" :value="true" bottom>
        <v-icon slot="activator" color="primary" dark>live_help</v-icon>
        <span>Name of the user</span>
    </v-tooltip>
</v-text-field>

Upvotes: 7

Related Questions