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

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

Answer 2

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

旧帖子，但在您的代码中看不到v-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"></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>

Vue Bootstrap - 工具提示不适用于动态呈现的HTML

3 个答案: