[Feature Request] Persistent tooltips
See original GitHub issueProblem to solve
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
Proposed solution
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>
Issue Analytics
- State:
- Created 5 years ago
- Reactions:1
- Comments:6 (4 by maintainers)
Top Results From Across the Web
Tooltips: How to create and use the mighty UI pattern - Appcues
Your more unique features may require a bit of context before users fully grasp ... Persistent tooltips can explain icons that may be...
Read more >Tooltip | Highcharts
The tooltip's content is rendered from a subset of HTML that can be altered in a number of ways, all in all giving...
Read more >How to Build Better Self-Serve Help with Chameleon
The best place to incorporate tooltips are where users get stuck, confused, or need added context to help them really adopt a new...
Read more >Tooltip needed in the new torrent window - Feature Requests ...
When adding a new torrent and getting the window that displays all the files inside then there needs to be tooltip when hovering...
Read more >Tooltips are persistently visible on Safari - Meta Stack Overflow
Welcome! This site is intended for bugs, features, and discussion of Stack Overflow and the software that powers it. You must have an...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
This can be achieved by assigning both
disabled
andv-model
to the same prop https://codepen.io/anon/pen/ZwvymMhere is a pen with desired behavior https://codepen.io/transGLUKator/pen/MLrvjL