Anyone? Any help will be appreciated...
On Oct 21, 12:42 am, Gordi <[EMAIL PROTECTED]> wrote: > Hi everyone, > > I'm trying to build a hoverable Jquery tooltip. > This tooltip should appear when I hover over some element, and stay > put if I choose to hover over the tooltip itself too. > The tooltip should disappear only if I hover away from the original > element or from the tooltip body. > > Based on an example I found, I managed to create this behavior, but > since I'm new to Jquery, I'd be glad to hear your comments about > improving the function. > > The code: > --------------------------------------------------------- > > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> > <html xmlns="http://www.w3.org/1999/xhtml";> > > <head> > <script src="jquery-1.2.6.min.js"></script> > <style> > #tooltip{ > position:absolute; > border:1px solid #333; > background:#f7f5d1; > padding:2px 5px; > color:#333; > display:none; > text-align: left; > > } > > </style> > > </head> > <body> > > <script type="text/javascript"> > jQuery.fn.extend({ > 'tooltip': function(text){ > xOffset = 10; > yOffset = 20; > > var that = this; > $(this).mouseover(function(e){ > this.t = text; > $("body").append("<div id='tooltip'>"+ this.t > +"</div>"); > $("#tooltip") > .css('position', 'absolute') > .css("top",(e.pageY - xOffset) + "px") > .css("left",(e.pageX + yOffset) + > "px") > .fadeIn("fast"); > }); > $(this).mouseout(function(){ > that.hide_ff = > setTimeout('$("#tooltip").hidetooltip()', 1000); > $("#tooltip").hover(function(){ > clearTimeout (that.hide_ff); > }, > function(){ > $("#tooltip").hidetooltip() > }); > > //$("#tooltip").hidetooltip() > }); > $(this).mousemove(function(e){ > $("#tooltip") > .css("top",(e.pageY - xOffset) + "px") > .css("left",(e.pageX + yOffset) + > "px"); > }); > }, > > 'hidetooltip': function() > { > var that = this; > $(this).remove(); > if (that.hide_ff) > { > clearTimeout (that.hide_ff); > } > } > > }); > > </script> > <a id="fff">ToolTip</a> > > <div id="tooltip_share_text" style="display:none"> > <div style="width: 100px;"> > This is a Tooltip. > <br/> > <a href="javascript:void(0)" onclick="alert('boo')"> Click Me</a> > </div> > </div> > <script type="text/javascript"> > $(document).ready(function() { > $("#fff").tooltip($('#tooltip_share_text').html());}); > > </script> > > </body> > </html> > > --------------------------------------------------------- > > Two things bother me most: > > 1. I needed to extend Jquery with 2 function (tooltip and > hidetooltip), i would like to achieve the same behavior with only one > extension but I didn't succeed in accomplishing this. > 2. The use I made of "that.hide_ff" just doesn't seem right. Once > again, I think this variable should belong to a "tooltip" object, but > if I am not mistaken it is attached to the Jquery object itself. > > In addition, I would be happy to hear any other improvements... > > Thanks in advance, > Gordi
