This is useful for placing clickable elements (e.g. a link) inside tooltip. Currently we can only increase closeDelay but it would be better to add a prop that would make a tooltip persistent - it wont close when hovered
Currently I use a custom wrapper for this, I think this can be included as part of core package
<template>
<v-tooltip v-bind="$attrs" ref="tooltip">
<slot name="activator" slot="activator"/>
<div @mouseenter="persistTooltip" @mouseleave="closeTooltip">
<slot/>
</div>
</v-tooltip>
</template>
<script>
export default {
name: 'PersistentTooltip',
inheritAttrs: false,
methods: {
persistTooltip() {
this.$refs.tooltip.runDelay('open')
},
closeTooltip() {
this.$refs.tooltip.runDelay('close')
},
},
}
</script>
This can be achieved by assigning both disabled and v-model to the same prop https://codepen.io/anon/pen/ZwvymM
This is not exactly the same behavior as described in the issue. The tooltip should be persisted only when hovered. When mouse leaves tooltip content, it should hide after closeDelay, unless hovered again
Ah, my apologize, i thought you were requesting just a general persistence.
here is a pen with desired behavior https://codepen.io/transGLUKator/pen/MLrvjL
MD2 tooltips don't support interactive content at all, they aren't intended to be used for links.
Thank you for the Feature Request and interest in improving Vuetify. After careful consideration the team has decided that this is not functionality that we are looking to implement at this time.
If you have any additional questions, please reach out to us in our Discord community.
Most helpful comment
This can be achieved by assigning both
disabledandv-modelto the same prop https://codepen.io/anon/pen/ZwvymM