search

enyo / opentip

Opentip is an open source javascript tooltip based on the protoype framework.
http://www.opentip.org
1.25k stars 401 forks source link

hideOn click doesn't work on part of the div #23

Closed sbrave closed 11 years ago

sbrave commented 11 years ago

I have a small div (23px by 22px), with a background image, that I'm using as a help icon for users to get inline help within a page. I'm using showOn=click and hideOn=click. The showOn=click works fine if I click anywhere inside the div. Once a tip is showing though, I can only click on half of the div to make it go away. It takes a while to figure out why the tip isn't going away, so makes for a bad user experience. Any idea why this is happening?

Here are the relevant portions of my code:

tip = new Opentip($("#help-" + attributeId), {  target: true, 
                                                tipJoint: "bottom right", 
                                                targetJoint: "left", 
                                                group: "group-help", 
                                                showOn: "click", 
                                                hideOn: "click" });
tip.setContent(helpDescription);

div class='help table_help' id='help-' + attributeId (sorry can't show the "<" ">", these are created and injected into the DOM)

.help{float:right; width:23px; height:22px; background-image:url(images/help.png);}

enyo commented 11 years ago

Is it possible that the shadow of the opentip is actually overlapping the div, thus intercepting all click events? If so, use 2 'hideTriggers'. One should be the trigger like its now, the other should be the tip. This way, clicking on the opentip itself hides it as well.

enyo commented 11 years ago

@sbrave did you solve the problem? I'd like to close this issue.

sbrave commented 11 years ago

Sorry for the delay. Yes! hideTriggers: ["tip", "target"] did it!

enyo commented 11 years ago

Great! Have a nice day.