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(); }, },
Advertisement
Answer
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