本文介绍了如何在 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:
- 您向该输入添加一个自定义类,其中您说
pointer-events: auto
或 - 您将
readonly
属性传递给组件,以便 Vuetify 添加v-input--is-readonly
类,该类删除了pointer-events: none
条件自动.
- You add a custom class to this input where you say
pointer-events: auto
or - You pass the
readonly
prop to the component so that Vuetify addsv-input--is-readonly
class which removes thepointer-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 中禁用文本字段上启用工具提示?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!