Vuejs: How to implement popover for each dropdown-items

Question

I want to have information text to be shown to the user when they hover the dropdown-items. A unique one for each dropdown. I'm using bootstrap-vue, I have a loop for the dropdown-items

<b-dropdown :text="currentColorType">
    <b-dropdown-item v-for="colorType in colorTypes"
    :key="colorType.id"
    :value="colorType.name">{{colorType.name}}</b-dropdown-item>
</b-dropdown>
<b-popover target="id" placement="bottom" triggers="hover blur">
    <div>Information Text Here</div>
</b-popover>

Is there an option to attach id dynamically to so that that can be given as target in . Tried

id="colorType.name"
id="`${colorType.name}`"

but didn't work. Also not sure if it would even be triggered even if I'm able to attach the id. Is there a better way to show info on dropdown-item hover ?

Hiws · Accepted Answer · 2020-08-14 09:06:59Z

4

The easiest way would be to use the popover directive v-b-popover instead of <b-popover>. This will allow you to directly attach the popover to <b-dropdown-item>.

new Vue({
  el: '#app',
  data() {
    return {
      colorTypes: [{
          id: 1,
          name: 'Blue'
        },
        {
          id: 2,
          name: 'Red'
        },
        {
          id: 3,
          name: 'Green'
        }
      ]
    }
  }
})

<link href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.js"></script>

<div id="app">
  <b-dropdown text="Colors">
    <b-dropdown-item v-for="colorType in colorTypes" :key="colorType.id" :value="colorType.name" v-b-popover.hover="colorType.name">
      {{ colorType.name }}
    </b-dropdown-item>
  </b-dropdown>
</div>

Example with HTML inside the popover

new Vue({
  el: '#app',
  data() {
    return {
      colorTypes: [{
          id: 1,
          color: 'Blue',
          name: '<b class="text-primary">Blue<b>'
        },
        {
          id: 2,
          color: 'Red',
          name: '<b class="text-danger">Red<b>'
        },
        {
          id: 3,
          color: 'Green',
          name: '<b class="text-success">Green<b>'
        }
      ]
    }
  }
})

<link href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.js"></script>

<div id="app">
  <h5>Using the HTML modifier</h5>
  <b-dropdown text="Colors">
    <b-dropdown-item v-for="colorType in colorTypes" :key="colorType.id" :value="colorType.name" v-b-popover.hover.html="colorType.name">
      {{ colorType.color }}
    </b-dropdown-item>
  </b-dropdown>
  <hr />
  <h5>Using an object</h5>
  <b-dropdown text="Colors">
    <b-dropdown-item v-for="colorType in colorTypes" :key="colorType.id" :value="colorType.name" v-b-popover.hover="{ content: colorType.name, html: true }">
      {{ colorType.color }}
    </b-dropdown-item>
  </b-dropdown>
</div>

edited Aug 14, 2020 at 9:06

answered Aug 14, 2020 at 7:25

Hiws

10.7k2 gold badges24 silver badges39 bronze badges

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

2 Comments

theFrontEndDev Over a year ago

Is it possible to give html in v-b-popover, its given in their documentation - bootstrap-vue.org/docs/directives/popover. But it doesn.t seems to work giving html: true. Instead of Blue I wish to have html there

Hiws Over a year ago

@theFrontEndDev I've added another snippet which shows two ways of rendering HTML.

Yondonjamts Ganzorig · Accepted Answer · 2020-08-14 07:24:53Z

3

You might need to bind some prop of element to

id of <b-dropdown>

and use v-for for <b-popover> too.

eg:

<b-dropdown :text="currentColorType">
  <b-dropdown-item 
   v-for="colorType in colorTypes"
   :key="colorType.id"
   :id="colorType.id"
   :value="colorType.name"
  >
    {{colorType.name}}
  </b-dropdown-item>
</b-dropdown>

<b-popover 
 v-for="(eachType, i) in colorTypes" 
 :key="i" 
 :target="eachType.id" 
 placement="bottom" 
 triggers="hover blur"
>
  <div>Information Text Here</div>
</b-popover>

answered Aug 14, 2020 at 7:24

Yondonjamts Ganzorig

3233 silver badges15 bronze badges

Collectives™ on Stack Overflow

Vuejs: How to implement popover for each dropdown-items

2 Answers 2

Example with HTML inside the popover

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Example with HTML inside the popover

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related