Как заставить всплывающую подсказку 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>

Answer 1

Вы можете программно показать / скрыть всплывающую подсказку , связав <b-tooltip>.show с логическим значением, для которого задано значение false после задержки setTimeout:

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