Click here to Skip to main content
14,644,010 members
Rate this:
Please Sign up or sign in to vote.
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.
Posted
Updated 22-Aug-12 23:59pm
v2
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
Rate this:
Please Sign up or sign in to vote.

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
   
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/
Rate this:
Please Sign up or sign in to vote.

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
   

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




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