Bootstrap 5 工具提示 ||弹出框答案

【问题标题】：Bootstrap 5 tooltip || popoverBootstrap 5 工具提示 ||弹出框
【发布时间】：2021-08-12 21:09:33
【问题描述】：

我在从引导程序中使用 vue 应用程序中的工具提示或弹出框时遇到了一点问题。

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

方法：

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

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

我 100% 确定我做错了什么:)。我必须单击两次才能显示弹出框，但它没有关闭。

当我创建示例时：

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

并已安装：

new Popover(this.$refs.tolek)

一切都很漂亮。

编辑：看起来像 create 指令可以完成这项工作：

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

指令：

  directives: {
    popover: {
      beforeMount(el, binding) {
        new Popover(el, {content: binding.value})
      }
    }
  },

【问题讨论】：

请接受答案，以便其他人知道问题已解决

标签： vue.js vuejs3 bootstrap-5

【解决方案1】：

不要将 BS data-bs- 属性与 Vue 混用。一定要在popover实例化后使用show()方法...

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

Demo

【讨论】：