How to make a BootstrapVue tooltip fade away after 2 seconds?

Question

I created a button that when clicked, copies some text and shows me a tooltip, acknowledging that the text was copied. I want to make the tooltip fade away after 2 seconds.

I tried to use a timeOut() method to fade away the tooltip, but it doesn't work. I'm using the tooltip from BootstrapVue. How can I solve this?

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

score 3 · Accepted Answer · answered May 31 '19 at 19:48

You could programmatically show/hide the tooltip by binding <b-tooltip>.show to a Boolean that is set false after a setTimeout-delay:

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

How to make a BootstrapVue tooltip fade away after 2 seconds?

1 Answers1