question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Feature Request] Persistent tooltips

See original GitHub issue

Problem 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:closed
  • Created 5 years ago
  • Reactions:1
  • Comments:6 (4 by maintainers)

github_iconTop GitHub Comments

2reactions
MajesticPotatoecommented, Feb 7, 2019

This can be achieved by assigning both disabled and v-model to the same prop https://codepen.io/anon/pen/ZwvymM

1reaction
SergeyKhvalcommented, Feb 7, 2019

here is a pen with desired behavior https://codepen.io/transGLUKator/pen/MLrvjL

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found