如何在 vuetify 中禁用文本字段上启用工具提示？

Question

代码显示工具提示图标，但当我悬停在它上面时不显示任何内容。如何在悬停时启用它，就像下面的数字一样。

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>

Answer 1

Vuetify 禁用禁用输入字段的所有指针事件：

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

去除这个的两种方法：

1. 您将自定义类添加到此输入，您说pointer-events: auto或
2. 您将readonly道具传递给组件，以便 Vuetify 添加自动v-input--is-readonly删除pointer-events: none条件的类。

因此，您的输入定义变为：

<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>