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

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>

Answer 1

您可以通过将<b-tooltip>.show绑定到在setTimeout延迟后设置为false的布尔值来programmatically show/hide the tooltip：

<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>