我有一个列表组,其列表项是通过 API 调用呈现的。
例如,
{
"MenuID": "1",
"Name": "<span v-b-tooltip.hover title=\"Self Help Training\">Help</span>",
"Url": "example.com"
}
我有以下 HTML,
<ul class="list-group list-group-flush">
<li class="list-group-item list-group-item-action" v-for="(link, i) in links" :key="i">
<a :href="link.Url" v-html="link.Name"></a>
</li>
</ul>
将鼠标悬停在项目上时,工具提示不起作用。你能帮我理解为什么会这样以及如何修复吗?谢谢
最佳答案
使用动态块时,您需要动态 ID。这意味着您必须为每个链接使用不同的 id,并确保在为工具提示创建目标时使用相同的 id。
就个人而言,如果该项目还没有一个动态 ID,我会创建一个动态 ID。
<div>
<p>{{itemName}}</p>
<div>
<img :id="'prod_' + prodId" src="../assets/utility/product.svg">
</div>
<b-tooltip :target="'prod_' + prodId" triggers="hover">
Delete item from the list!
</b-tooltip>
</div>
关于vuejs2 - Vue Bootstrap - 工具提示不适用于动态呈现的 HTML,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50406677/