floating-vue icon indicating copy to clipboard operation
floating-vue copied to clipboard

Tooltip following the cursor

Open jamesAtcodeninja opened this issue 6 years ago • 8 comments

Is there an option to have the tooltip popup where the cursor is like the title attribute does?

jamesAtcodeninja avatar Nov 10 '17 07:11 jamesAtcodeninja

It would be nice to have this feature!

Shenmin-Z avatar Jan 11 '18 19:01 Shenmin-Z

As v-tooltip is based on Popper.js, that would probably be something more Popper.js-related in my opinion.

Actually there has been done already some work on their side, but because of some issues (for example when scrolling on the page) they closed it for now (that was back in 2017 already): https://github.com/atomiks/tippyjs/issues/32

ivansieder avatar Aug 22 '18 14:08 ivansieder

This could work. Below is a first quick draft, on how it's possible with Popper.js and v-tooltip. Adding a few config options and fine-tuning to limit it's movement to the selected component/element.

v-tooltip-follow-curser

ivansieder avatar Aug 22 '18 15:08 ivansieder

Progress: Now configurable for each component individually, which allows to have fixed and flexible items. Also plays along nicely with pre-defined Popper.js placement options (top, bottom,...) v-tooltip-follow-curser

ivansieder avatar Aug 22 '18 16:08 ivansieder

#143 the PR is up, anyone who's interested or has suggestions is more than welcome to provide feedback! I'd love to hear your opinion

ivansieder avatar Aug 23 '18 11:08 ivansieder

there is also a codepen showing popper following the mouse. This could be also play well with other targets to follow e.g. a range input knob or progress bar.

joernroeder avatar Sep 03 '18 19:09 joernroeder

Thanks @joernroeder, that is actually the demo I took as a base for the PR

ivansieder avatar Sep 03 '18 20:09 ivansieder

Would love this. Could be very nicely implemented like clubhouse has. By restricting it to the X-axis. And maybe the ability to restrict it to the Y-axis as well.

(My mouse is apparently not screen-captured) tooltip-follow-mouse-x-pos

Knogobert avatar Aug 29 '19 07:08 Knogobert