Bootstrap 5 tooltip || popover

user_15853844 0
Viewed 849

I have a little problem with use tooltip or popover in vue app from bootstrap.

<template>
...
    <i :title="person.jobTitle" class="fa fa-tag" data-bs-placement="left" data-bs-toggle="tooltip" @click="showDetails"></i>
...
</template>

method:

<script>
import {Popover} from "bootstrap";
...

methods: {
   showDetails(event) {
      new Popover(event.target)
   }
}
...
</script>

Im 100% sure im doing something wrong :). I have to click twice to showup popover, and it's not closing.

While I create example:

    <button id="tolek" ref="tolek" title="aha" class="btn btn-secondary">
      Popover
    </button>

and in mounted:

new Popover(this.$refs.tolek)

it's all work beautiful.

Edit: looks like create directive do the job:

<i title="Job Title" class="fa fa-tag" v-popover:click="person.jobTitle"></i>

directive:

  directives: {
    popover: {
      beforeMount(el, binding) {
        new Popover(el, {content: binding.value})
      }
    }
  },
bootstrap-5 vuejs3 vue.js
1 Answers

Don't mix the BS data-bs- attributes with Vue. Make sure to use the show() method after the popover is instantiated...

    methods: {
       showDetails(event) {
          this.bsPopover = new Popover(event.target, {placement: 'left', trigger: 'click'})
          this.bsPopover.show()
       }
    }

Demo

user_1714560
Related