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

【问题标题】：How to make a BootstrapVue tooltip fade away after 2 seconds?如何使 BootstrapVue 工具提示在 2 秒后消失？
【发布时间】：2019-05-31 13:52:39
【问题描述】：

我创建了一个按钮，当单击该按钮时，它会复制一些文本并向我显示一个工具提示，以确认文本已被复制。我想让工具提示在 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>

【问题讨论】：

标签： javascript vue.js vuejs2 tooltip bootstrap-vue

【解决方案1】：

您可以通过将 <b-tooltip>.show 绑定到在 setTimeout-delay 之后设置为 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>

【讨论】：