javascript - 按钮上的工具提示有效，但输入时无效

Question

我想在我使用 Vue 3 和 Bootstrap 5 的项目中使用 Tooltips。

我在脚本中做了以下操作:

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

  export default {
    mounted() {
      Array.from(document.querySelectorAll('button[data-bs-toggle="tooltip"]'))
      .forEach((tooltipNode) => new Tooltip(tooltipNode));
    }
  }
</script>

现在我想在我的模板中使用它。在下面的按钮上效果很好，但我无法在我的输入上使用它。

<template>
  <button type="button" class="btn btn-secondary me-2" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
    Tooltip on top
  </button>

  <input
    type="text"
    class="form-control"
    data-bs-toggle="tooltip"
    data-bs-placement="bottom"
    :title="txt_input"
    :value="txt_input"
    readonly
  />
</template>

我不明白为什么它不起作用。感谢您的帮助!

Answer 1

假设您有一个 txt_input 值，您只需为按钮元素重复代码即可:

    mounted() {
      Array.from(document.querySelectorAll('button[data-bs-toggle="tooltip"]'))
      .forEach((tooltipNode) => new Tooltip(tooltipNode));
      Array.from(document.querySelectorAll('input[data-bs-toggle="tooltip"]'))
      .forEach((tooltipNode) => new Tooltip(tooltipNode));
    }

但是，我们可以通过使用类名来编写更清晰的实现:

<template>
  <button 
    class="btn btn-secondary me-2 tooltip-element"
    data-bs-placement="top"
    title="Tooltip on top"
    type="button">
    Tooltip on top
  </button>

  <input
    :title="txt_input"
    :value="txt_input"
    class="form-control tooltip-element"
    data-bs-placement="bottom"
    readonly
    type="text"
  />
</template>

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

  export default {
    mounted() {
      Array.from(document.querySelectorAll('.tooltip-element'))
      .forEach((tooltipNode) => new Tooltip(tooltipNode));
    }
  }
</script>

编辑

如果我们在 querySelectorAll 中使用类名称，我们可以从元素中删除 data-bs-toggle="tooltip"。