Click here to Skip to main content
14,643,859 members

Hide div controls when clicked outside div

Member 7917182 asked:

Open original thread
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";
}


<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.
Tags: C#, Javascript, ASP.NET, jQuery

Preview



When answering a question please:
  1. Read the question carefully.
  2. Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
  3. 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.
  4. 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.
Please note that all posts will be submitted under the http://www.codeproject.com/info/cpol10.aspx.




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100