[jQuery] Improving a tooltip code

Gordi Mon, 20 Oct 2008 16:12:59 -0700

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

[jQuery] Improving a tooltip code

Reply via email to