darsain / tooltip

JavaScript Tooltip component.
http://darsa.in/tooltip
190 stars 15 forks source link

hideOn event when only leaving the tooltip Area #9

Closed ghost closed 9 years ago

ghost commented 9 years ago

Hey Darsain! Just a quick thanks for this awesome tooltip system. It's great!

I'm currently creating a widget system with drag and drop functionality (using interactJS) and incorporating your tooltip system with it is awesome. Especially using tips.hide(event) when a user drags something! It's smooth and sexy.

My issue is, I am incorporating 2 links inside the tooltip when a user hover overs a widget: For example: http://i.gyazo.com/130cc14a8666d8e5c47169a975e28738.png

But, once the user's mouse leaves the tooltip div, it disapears. I only want the tooltip to hide, when the user leaves the .tooltip class. (So the user still has the option to click on the Edit and X links.

I have been fiddling with hideOn event, but with no luck.

TLDR; On your main site, when you click on the input field with focus. You can still click on the tooltip without it disappearing. (It disappears upon clickation, that's what I'm trying to do). I want that same kind of effect, but w/o using input fields, if you get what I mean?

Thanks alot if you can help! Appreciate it.

darsain commented 9 years ago

This issue should be posted to darsain/tooltips repo.

Tooltip is a "lower level" tooltip implementation. You create a Tooltip instance for a single tooltip, give it some .content(), and have access to methods like .attach(), .show(), .hide(), ... but when these methods are triggered and with what arguments is completely dependend on a developer and their implementation.

Tooltips on the other hand, is a higher library that consumes the lower Tooltip. It takes elements you want to display tooltips on, and handles all the juggling of creating, attaching and displaying Tooltip instances on them.

Now to your problem - Tooltips is meant only for a simple displaying of tooltips, and not for providing interfaces. If you want Tooltip to pop up on different events than just simple mouse over/out on a target element, you should take Tooltip and implement it yourself. This is exactly what is happening with the input example on the main page for this repo.

That being said, I'm planning on adding a delay option to Tooltips (https://github.com/darsain/tooltips/issues/3) and making them interactive is I guess the next logical step. I went and made issues that will make it possible to use Tooltips the way you describe when implemented. So this is all that needs to happen:

https://github.com/darsain/tooltip/issues/10 https://github.com/darsain/tooltips/issues/3 https://github.com/darsain/tooltips/issues/6

I should get to it within the next week, but there are thousands of things that can delay it :)

I'm gonna close this issue as it is in the wrong repo, and also with the issues listed above now redundant.