Hide div controls when clicked outside div

Question

4.00/5 (1 vote)

See more:

JavaScript

function HideContent(d) {
    if (d.length < 1) { return; }
    document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
    if (d.length < 1) { return; }
    var dd = document.getElementById(d);
    AssignPosition(dd);
    dd.style.display = "block";
}

ASP.NET

<div id="maindiv">
       <label id="lblText" runat="server" onmouseover="ShowContent('tooltip2'); return true;">
           Mouseover for Tooltip
       </label>
       <div id="tooltip2" class="tooltip">
           <label id="lblTooltip" runat="server" onmouseout="HideContent('tooltip2'); return true;" >
               This is it
           </label>
       </div>
   </div

Here, I have a label - lblText and on mouseover, a tooltip shows. Again on mouseover of tooltip, the tooltip hides. There is no other way of hiding the tooltip. I want a click event now, when the user clicks anywhere on the page, the tooltip hides. I have been trying to do it, but no success.

Posted 22-Aug-12 23:45pm

Member 7917182

Updated 22-Aug-12 23:59pm

v2

Add a Solution

Comments

Zoltán Zörgő 23-Aug-12 7:25am

What exactly have you tried?

Member 7917182 23-Aug-12 8:41am

I am not very good at jscript.
This is what I have tried. But I just cant find a way of changing the location of the tooltip (it should move with the mouse and should be on the bottem right of it)
http://jsfiddle.net/AcpWG/

Zoltán Zörgő 23-Aug-12 9:10am

So you want to move your tooltip aling with the mouse? All the page around or only when above an element?

Member 7917182 23-Aug-12 9:35am

Yes, I want to move my tooltip along with the mouse WHEN the mouse is on the mentioned label. I should also be able to go to my tooltip so I can select the content.
The last jsfiddle link wasn't working...i have updated it. this is what I have tried. I cant place the tooltip properly now. The commented code in jsfiddle is written for location of the tooltip.

http://jsfiddle.net/AcpWG/8/

Zoltán Zörgő 23-Aug-12 9:41am

Try this: http://jquery.bassistance.de/tooltip/demo/
Look for: "The next four links have no delay with tracking and fading, with extra content"

Or this one: http://craigsworks.com/projects/qtip2/demos/#mouse

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

vijaysutaria · Answer 1 · 2012-08-23T03:14:00

Solution 1

I think you should follow below steps

1) write onmouseover event of lbltext , and write code to show the tooltip
2) write onmouseout event of lbltext, and write code to hide tooltip

Check this. It has example to zoom the image when mouse pointer is on image and will come to the original state when mouse pointer is out from image

Posted 23-Aug-12 3:14am

vijaysutaria

Comments

Member 7917182 23-Aug-12 9:24am

@vijaysutaria - I dont want the tooltip to hide onmouseout event of label. My tooltip contains hyperlinks and/or images, so user should be able to go to the tooltip and select them. So far, that is working fine. Have put onmouseout event for tooltip to hide it. But that will have the user to always go to the tooltip to hide it.

Member 7917182 23-Aug-12 9:36am

This is what I have tried. I cant place the tooltip properly now. The commented code in jsfiddle is written for location of the tooltip.

http://jsfiddle.net/AcpWG/8/

Sandip.Nascar · Answer 2 · 2012-08-23T03:39:00

Solution 3

You need to use setTimeout to cater this type of situation.

Try this article, this will give you a fair idea of what you eant,

http://www.learningjquery.com/2009/12/using-settimeout-to-delay-showing-event-delegation-tooltips[^]

Hope this helps.
cheers

Posted 23-Aug-12 3:39am

Sandip.Nascar