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:
- 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.
- 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