tooltip in vue

[gitakachan]

//install bootstrap, popper.js
npm i @popperjs/core
npm i bootstrap

//main.js
import "bootstrap/dist/js/bootstrap.bundle"; //引入bootstrap js

//methods 可以引用到需要的地方，也可寫成mixin，然後mounted時執行函數
import Tooltip from "bootstrap/js/dist/tooltip";
export default function() {
  //inti tooltip
  Array.from(
    document.querySelectorAll('button[data-bs-toggle="tooltip"]')
  ).forEach((tooltipNode) => new Tooltip(tooltipNode));
}

//components 引入
import tooltip from "@/methods/tooltip.js";
export default {
  name: "Product",
  mounted() {
    tooltip();
  },
};

<!--component html-->
<button
  type="button"
  class="btn btn-secondary"
  data-bs-toggle="tooltip"
  data-bs-placement="top"
  title="Tooltip on top"
>
  Tooltip on top
</button>

參考：

https://bootstrap5.hexschool.com/docs/5.0/components/tooltips/#usage https://therichpost.com/vue-3-bootstrap-5-tooltip-working-example/

注意：引入js時不要亂引入，引入重疊的有可能會導致功能無法正確執行