javascript - 如何使 BootstrapVue 工具提示在 2 秒后消失？

Question

我创建了一个按钮，单击该按钮会复制一些文本并向我显示一个工具提示，确认文本已被复制。我想让工具提示在 2 秒后消失。

我尝试使用一种timeOut()方法来淡化工具提示，但它不起作用。我正在使用 BootstrapVue 的工具提示。我该如何解决这个问题？

<!-- Button to copy translated content using clipboard.js -->
<b-button id="copyBtn" class="copy-translation-btn my-4" :disabled="!this.wordTranslated" :data-clipboard-text="this.wordTranslated" variant="outline-success">Copy Translation</b-button>

<!-- Tooltip will show only when text is translated & button clicked -->
<b-tooltip v-if="this.wordTranslated" triggers="click" target="copyBtn" placement="bottom">
  <strong>Text Copied</strong>
</b-tooltip>

标签： javascriptvue.jsvuejs2tooltipbootstrap-vue

Answer 1

您可以通过绑定到在-delay后设置为 false 的布尔值以编程方式显示/隐藏工具提示：<b-tooltip>.showsetTimeout

<template>
  <div>
    <b-button id="copyBtn" @click="showTooltip = true">Copy</b-button>
    <b-tooltip target="copyBtn"
               :show.sync="showTooltip"
               @shown="hideTooltipLater"
               triggers
               title="Text Copied">
    </b-tooltip>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showTooltip: false
    };
  },
  methods: {
    hideTooltipLater() {
      setTimeout(() => {
        this.showTooltip = false;
      }, 2000);
    }
  }
};
</script>