將 Bootstrap 5 工具提示添加到 Vue 3

Question

主程序

import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.min.js";

組件.vue

<template> 
                  <i
                class="fas fa-info-circle"
                data-bs-toggle="tooltip"
                data-bs-placement="top"
                title="Tooltip on top"
                ref="info"
              ></i>


</template>
<script>
import { Tooltip } from "bootstrap/dist/js/bootstrap.esm.min.js";

export default {
  mounted() {
    console.log(this.$refs.info);
    new Tooltip(this.$refs.info)
  },
}
</script>

我嘗試單擊該圖標，但沒有任何結果。 我做錯了嗎？

Answer 1

只需使用import { Tooltip } from "bootstrap"; ，它應該工作。

演示

Answer 2

這是一個更優雅、更現代的解決方案，它使用 Typescript 和新的 Vue 3 腳本設置。

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { Tooltip } from "bootstrap";

const info = ref(null);
let infoTooltip: Tooltip | undefined;

onMounted(() => {
  infoTooltip = new Tooltip(info.value!);
});
</script>

<template> 
  <i
    class="fas fa-info-circle"
    data-bs-toggle="tooltip"
    data-bs-placement="top"
    title="Tooltip on top"
    ref="info"
  ></i>
</template>

Answer 3

您可以創建指令“v-tooltip”並在任何元素 html 中使用。

創建文件 tooltip.js

import { Tooltip } from 'bootstrap'

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

}

在 main.js 添加

import { tooltip } from 'your_path/tooltip'

app.directive('tooltip', tooltip)

並使用它：

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

Answer 4

我有同樣的問題。 這段代碼對我有用。

import { Tooltip } from 'bootstrap'

export default {
  mounted() {
    new Tooltip(document.body, {
      selector: "[data-bs-toggle='tooltip']",
    })
  }
}

Answer 5

如果您使用的是引導 CDN，那么您也可以在App.vue掛載函數中執行此操作，如下所示：

<script>

export default {
  mounted() {
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
      return new bootstrap.Tooltip(tooltipTriggerEl)
    });
  }
}

</script>