如何使 BootstrapVue 工具提示在 2 秒后消失?
How to make a BootstrapVue tooltip fade away after 2 seconds?
我创建了一个按钮,单击该按钮会复制一些文本并显示工具提示,确认文本已被复制。我想让工具提示在 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>
您可以 programmatically show/hide the tooltip 通过将 <b-tooltip>.show
绑定到在 setTimeout
-延迟后设置为 false 的布尔值:
<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>
我创建了一个按钮,单击该按钮会复制一些文本并显示工具提示,确认文本已被复制。我想让工具提示在 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>
您可以 programmatically show/hide the tooltip 通过将 <b-tooltip>.show
绑定到在 setTimeout
-延迟后设置为 false 的布尔值:
<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>