I have a vuetify tooltip component. In the tooltip I have a {{date | moment}}. I get a static a few seconds ago.
I want every time I hover over the button, to refresh the button tooltip to the current elapsed time (10 minutes ago for example).
I can't figure out how to rerender the tooltip on hover with the updated filter.
filters: {
moment: function (date) {
return moment(date).fromNow();
},
},
If I understood correctly about what you are trying to achieve, this idea might help you (below is the code pen link):
simulated elapsed time on button hover
<div id="app">
<v-app id="inspire">
<div class="text-center d-flex align-center justify-space-around">
<v-tooltip bottom>
<template v-slot:activator="{ on, attrs }">
<v-btn
color="primary"
dark
class="mt-10"
v-bind="attrs"
v-on="on"
@mouseover="setElapsedTime"
>
Button
</v-btn>
</template>
<span>{{ elapsedTime }}</span>
</v-tooltip>
</div>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data() {
return {
startTime: Date.now(),
elapsedTime: '',
}
},
methods: {
setElapsedTime() {
const millis = Date.now() - this.startTime;
this.elapsedTime = `seconds elapsed = ${Math.floor(millis / 1000)}`;
}
} })
tooltip text is bound to a variable in the data object, whenever the user hover over the button, a method is called which updates the variable in the data object