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

两种删除方法：

您在此输入中添加自定义类，并说pointer-events: auto或
您将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>

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

1 个答案: