Geek Answers Handbook

How to create a tooltip with jquery without a plugin?

I have used several different tooltip plugins over the years, but I think it's time to write my own. I'm just not looking for a plugin that has all the options, because I know how I want each tooltip to pop up to look and behave. Most plugins have a range of animations and positions available, and I think this is excessive for the lung I want to create with your help, of course :)

Basically, using the title attribute of the guidance, I want the tooltip to display directly above and center with the hover element.

I know how to populate the div to be shown, but what I'm trying to work out is how to say that the div positions itself directly above the element.

Ideally, this is done with minimal code. My logic says something like this (pseudo code):

<html> <head> <style type="text/css"> #myToolTip { display: none; } </style> 

 <script type="text/javascript"> $(document).ready(function() { $('.hoverAble').hover(function(){ var tip = $(this).attr('title'); $('#myToolTip').html(tip).fadeIn(); }, function() { $('#myToolTip').fadeOut(); } }); </script> </head> <body> <div id="myToolTip"></div> <div class="hoverAble" title="I am good at code"></div> </body> </html>

Of course, the above code will simply pop up a tooltip and will not be positioned relative to the hovering element. Where my understanding does not fit. You can help?

Edit: Just for clarification, I don't want the tooltip to be moved with the mouse.

+7
jquery css
source share
5 answers

Take a look at the various CSS functions in jQuery, mainly offset() and possibly height() .

 // pseudocode, assuming #tooltip has position: absolute // do something similar with the left offset as well $('#tooltip').css({ top : $('#link').offset().top + 10 + 'px' });

This will put the tooltip statically or closer to the link, which I think is what you are looking for. If you want the tooltip to be moved with the mouse, you need to dynamically update the position in the mousemove event.

+5
source share
 <div title="This is tooltip">Hover Me</div>

This simple hint works for me. U can add any class to make it stylish.

+3
source share

Without specific code examples, you can see the contents of an event object (I assume that you are doing this in an onmouseover event).

The clientX and clientY properties of this should help

Please note the following:

http://www.javascriptkit.com/jsref/event.shtml

+1
source share

I think this can help you.

 <html> <head> <style type="text/css"> #myToolTip { display: none;position:absolute; } </style> <script type="text/javascript" src='js/jquery.js'></script> <script type="text/javascript"> $(document).ready(function(){ $('.hoverAble').hover(function(e){ var left = mouseX(e); var top = mouseY(e); var tip = $(this).attr('title'); $('#myToolTip').css('top',top); $('#myToolTip').css('left',left); $('#myToolTip').html(tip).fadeIn(); }, function() { $('#myToolTip').fadeOut(); }) });

mouse position:

 function mouseX(evt) { if (evt.pageX) return evt.pageX; else if (evt.clientX) return evt.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft); else return null; } function mouseY(evt) { if (evt.pageY) return evt.pageY; else if (evt.clientY) return evt.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); else return null; } </script> </head>

HTML:

 <body> <div id="myToolTip"></div> <div class="hoverAble" title="I am good at code">hi catch me</div> </body> </html>
+1
source share

One of the easiest to use jQuery.UI built-in tooltips.

 $(document).tooltip();

And in html all the "title" tags turn to the tooltip ...

 <div class="juppiduppi" title="Here is a tooltip, just for you. ">Over here with the mouse... </div>
0
source share

More articles:


All Articles