如何在 vuetify 中禁用文本字段上启用工具提示? [英] 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>

推荐答案

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

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. 您向该输入添加一个自定义类，其中您说 pointer-events: auto 或
2. 您将 readonly 属性传递给组件，以便 Vuetify 添加 v-input--is-readonly 类，该类删除了 pointer-events: none 条件自动.

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>

这篇关于如何在 vuetify 中禁用文本字段上启用工具提示?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！