Bootstrap 5 tooltip || popover

Question

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})
      }
    }
  },

Answer 1

For Vue3 and Bootstrap 5 you could use Directives

---

My answer is inspired on the answer from Sergio Azócar and I used TypeScript instead of JavaScript.

Create file bootstrap.ts

import { Tooltip, Popover } from 'bootstrap'

export const tooltip = {
  mounted(el: HTMLElement) {
    const tooltip = new Tooltip(el)
  }
}

export const popover = {
  mounted(el: HTMLElement) {
    const popover = new Popover(el)
  }
}

In main.ts add

import { tooltip } from 'your_path/tooltip'

app
 .directive('tooltip', tooltip)
 .directive('popover', popover)
 .mount("#app");

And use it

<button v-tooltip title="Hello world from a button!">
    I am a button
</button>

<div v-popover title="Hello world from a div!" data-bs-content="And with some amazing content">
  I am a div
</div>