I am encountering an issue that I cannot seem to resolve. I am unsure if this is a Vue/Vuetify bug or if the error lies on my end.
Here is what I am trying to achieve: Display a tooltip only on small screen sizes and lower, regardless of the initial screen size at page load.
The code works as expected when the page is loaded at a small screen size and responsively adjusts (enlarge screen size to medium and higher, then reduce back to small). However, the tooltip does not show and is unresponsive when the page is loaded at medium screen size or higher and then reduced to small.
<template>
<v-container fluid>
<v-row>
<v-col cols="auto" align="center">
<v-tooltip right :disabled="$vuetify.breakpoint.mdAndUp">
<template v-slot:activator="{ on }">
<v-icon color="success" v-on="on">mdi-check</v-icon>
</template>
<span>sm screen size!</span>
</v-tooltip>
<div class="hidden-sm-and-down">md screen size!</div>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
data () {
return {
}
},
}
</script>
Any assistance would be greatly appreciated. Thank you! Meffesino