search

darsain / tooltip

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

Add interactive option #10

Closed darsain closed 9 years ago

darsain commented 9 years ago

Currently, every tooltip is styled with pointer-events: none. This removes any possibility for interactive elements.

This styling should be removed, and functionality moved to interactive option flag, that would basically do:

this.element.style.pointerEvents = this.options.interactive ? 'all' : 'none';

Maybe also #interactive(boolean) method.

ghost commented 9 years ago

Sweet! I did a dirty trick that's not really intuitive, but gets the job done for my widget system with interactjs.

I simply added 

.tooltip{
 pointer-events: visible;
}

Under where tooltip.css is called (Mind you this is global, and not very intuitive, but for my page it works fine lol).

Then under my data-tooltip attribute, I have html with onclick's to take advantage of the HTML and JS support inside the attributes. Then, upon clickation, for example:

data-tooltip='<div class="editb"><span onclick="editwidget({$i}, this)">[Edit]</span> <span onclick="deletewidget({$i})">[X]</span></div>'

Then, under editwidget, I call tips.hide(element) so once a user clicks it, it fades out nice! :)

The only issue is, if the user doesn't click these, they're left visible. I'm going to try onmouseout as well with a js function to remove the tips. It still won't be where I want it, but close enough! Here is a gif of it:

Once you do finish the pointerEvents, this would work like a BEAST for small menus too!

I'm definitely looking forward for the updates! Thanks Darsain!

Edit: I also didn't view this as an 'issue' (I say this, because I don't want you to be offended). I just didn't know where I could tell you, or post about my problem. The only section was the issue forum. So I said screw it, what do I got to lose anyway, we are just insignificant inhabitants of a pale blue dot... :dancer: