CODEWITHSUNDEEP
javascriptcssvue.jsbootstrap-vue
theFrontEndDev
theFrontEndDev

Reputation: 973

Vuejs: How to implement popover for each dropdown-items

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 ?

Upvotes: 2

Views: 2122

Answers (2)

Hiws
Hiws

Reputation: 10444

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>

Upvotes: 4

Yondonjamts Ganzorig
Yondonjamts Ganzorig

Reputation: 323

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>

Upvotes: 3

Related Questions