Vue Bootstrap - 工具提示不适用于动态渲染的 HTML

Question

>我有一个列表组，其列表项是从 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>

将鼠标悬停在项目上时，工具提示不起作用。你能帮我理解为什么会这样以及如何解决吗？谢谢

Answer 1

使用动态块时，需要动态 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>

Answer 2

现在回答已经很晚了，但也许有人会发现它很有用。

接口响应：

{
"MenuID": "1",
"Name": "Help",
"Title": "Self Help Training",
"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">
<span v-b-tooltip.hover :title="link.Title">
{{ link.Name }}
</span>
</a>
</li>
</ul>

Answer 3

旧帖子，但我在您的代码中没有看到 v 工具提示。

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

做这样的事情

<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-tooltip="'Your Tooltip message'" v-html="link.Name"></a>
</li>
</ul>

Answer 4

基于 https://bootstrap-vue.js.org/docs/components/tooltip/您必须添加 V-B-tooltip 指令。

<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" v-b-tooltip.hover :title="link.Name"></a>
</li>
</ul>