Vue Bootstrap - Tooltip not working for dynamically rendered HTML

Question

I have a list group whose list items are rendered from an API call. For example,

  {
    "MenuID": "1",
    "Name": "<span v-b-tooltip.hover title=\"Self Help Training\">Help</span>",
    "Url": "example.com"
  }

I have the below 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>

The tooltip does not work when hovered on the item. Can you please help me understand why that is and how it can be fixed? Thanks

the name property is just html text and render with v-html directive, in this way, vue will not compile the content — jacky, May 18 '18 at 08:29
you can register a component with template Help,and use props to receive the tooltip text and title text — jacky, May 18 '18 at 08:31
Does this answer your question? [How can add bootstrap tooltip inside Vue.js](https://stackoverflow.com/questions/37078423/how-can-add-bootstrap-tooltip-inside-vue-js) — Maxim Fedotov, Mar 03 '20 at 12:54

score 0 · Answer 1 · edited Apr 11 '21 at 12:15

When using a dynamic block, you need dynamic ids. That means that you have to have different id for every link you have and to make sure you use the same id when create the target for your tooltip. Personally, I create a dynamic id if the item does not already have one.

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

score 0 · Answer 2 · answered Dec 13 '22 at 18:23

It's quite late for the answer, but maybe somebody would find it useful.

API response:

  {
    "MenuID": "1",
    "Name": "Help",
    "Title": "Self Help Training",
    "Url": "example.com"
  }

Then modify your HTML this way:

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

score -1 · Answer 3 · edited Dec 09 '20 at 20:45

-1

Old post but I do not see v-tooltip in your code.

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

Do something like this

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

edited Dec 09 '20 at 20:45

Dharman

30,962
25
85
135

answered Dec 09 '20 at 20:39

Dustin Cox

1

The tooltip is within the html of the API call. Issue is that this vue doesn't interprets the directives in injected html. – Steve Maris Dec 09 '20 at 21:12
Ok I see it as v-b-tooltip. It most likely has to becase the way your code is written. "Help". Looks like you are trying to pass a string on key Name. You are escaping the string before Self Help Training. Can you try "Help". Also, I got mine working yesterday by doing v-tooltip.hove :title= and not v-b-tooltop. Hope this helps. – Dustin Cox Dec 10 '20 at 16:15
- The issue stays the same. The "" is something fetched by the API, not something in the code. - The "v-b-tooltip" is a bootstrap tooltip. - The comment of @jacky is the best approach. The API should not give html, just a 'tooltip text' and a 'content text'. And then you use those properties in a component. – Steve Maris Dec 10 '20 at 17:58

score -2 · Answer 4 · answered May 18 '18 at 09:27

based https://bootstrap-vue.js.org/docs/components/tooltip/ you must add v-b-tooltip directive.

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

Vue Bootstrap - Tooltip not working for dynamically rendered HTML

4 Answers4