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
– jacky, Commented May 18, 2018 at 8:29
you can register a component with template Help,and use props to receive the tooltip text and title text — jacky
– jacky, Commented May 18, 2018 at 8:31
Does this answer your question? How can add bootstrap tooltip inside Vue.js — Maxim Fedotov
– Maxim Fedotov, Commented Mar 3, 2020 at 12:54

Dharman · Accepted Answer · 2021-04-11 12:15:41Z

0

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>

edited Apr 11, 2021 at 12:15

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Apr 11, 2021 at 12:10

Darius

1351 silver badge2 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Igor Popov · Accepted Answer · 2022-12-13 18:23:32Z

0

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>

answered Dec 13, 2022 at 18:23

Igor Popov

9988 silver badges16 bronze badges

Comments

Dharman · Accepted Answer · 2020-12-09 20:45:01Z

-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 9, 2020 at 20:45

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Dec 9, 2020 at 20:39

Dustin Cox

1

3 Comments

Steve Maris Over a year ago

The tooltip is within the html of the API call. Issue is that this vue doesn't interprets the directives in injected html.

Dustin Cox Over a year ago

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.

Steve Maris Over a year ago

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

M.Alfisyah Reza Daulay · Accepted Answer · 2018-05-18 09:27:09Z

-2

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>

answered May 18, 2018 at 9:27

M.Alfisyah Reza Daulay

2921 silver badge11 bronze badges

Collectives™ on Stack Overflow

Vue Bootstrap - Tooltip not working for dynamically rendered HTML

4 Answers 4

Comments

Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related