我有一个使用Vuetify的v-tooltip的共享组件,当鼠标悬停时,它工作得很好。但是,当我使用点击按钮访问具有工具提示的按钮时,它不工作。有人可以帮助我解决这个问题吗?
下面是我的工具提示组件的代码:
<template>
<v-tooltip
v-bind="$attrs"
:open-on-focus="true"
:content-class="`${tooltipClass} custom-tooltip ${color} darken-2`"
open-delay="250"
max-width="288px"
>
<template v-slot:activator="{ on, attrs }">
<div v-bind="attrs" v-on="on">
<slot />
</div>
</template>
<span class="tooltip-text">{{ getTooltipText() }}</span>
</v-tooltip>
</template>
字符串
我是这么用的
<tooltip
tooltip-text="edit metadata"
bottom
position="bottom"
>
<EditExternalButton
:external-link="item.editLink"
:data-test="`result-list-item-edit-external-${i + 1}`"
event-name-string="metadata_edit clicked"
/>
</tooltip>
型
我试着添加:open-on-focus="true"
但没有成功
1条答案
按热度按时间eagi6jfj1#
一个普通的div通常不能被聚焦,所以你永远不会通过键盘到达它,处理程序也不会被触发。
有几种方法可以解决这个问题:
tabindex="0"
添加到div中以使其可制表:字符串
的数据
型
型