jQuery tooltip on table cell

Question

I am trying to creating simple tooltip on table cells using jQuery.
I wrote this code :

<script type="text/javascript">
        $(function () {

            $(".test").bind("mouseenter", function (e) {
                $("#ToolTipDIv").offset({ left: e.pageX, top: e.pageY });
                $("#ToolTipDIv").show("slow");
            });
            $(".test").bind("mouseleave", function (e) {
                $("#ToolTipDIv").hide("slow");
            });
        }); 

    </script>
<div id="ToolTipDIv" style="background-color: Yellow; display: none; width: 20%;">
        This is a text
    </div>
    <table class="style1" border="1">
        <tr>
            <td class="test">
                1
            </td>
            <td class="test">
                6
            </td>
        </tr>
        <tr>
            <td class="test">
                2
            </td>
            <td class="test">
                7
            </td>
        </tr>
        </table>

But it does not work as expected. when I bring mouse over cells Tooltip Div closed and opened several times.
for example I want to view tooltip for third Cell I bring mouse pointer over First and second cell to reach the third cell.jQuery tooltip will be show and hide 3 times.
jsfiddle link

Answer 1

That's because when your new div pops up and your mouse is "in" that new div you are no longer hovering on the old location. My suggestion first is to use jquery's hover instead of specifically stating mouseenter etc... and then look at the plugin hoverintent. but for a fix to your problem you need to set the pop up div's position to absolute.

Answer 2

My advice is that tooltips can appear quickly but disappear fast (less disturbing for the user). So your code would be:

$(function () {
    $(".test").bind("mouseenter", function (e) {
        $("#ToolTipDIv").offset({ left: e.pageX, top: e.pageY });
        $("#ToolTipDIv").show('normal');
    });
    $(".test").bind("mouseleave", function (e) {
        $("#ToolTipDIv").hide(); //Note I removed 'slow'
    });
}); 

And, add a position: absolute; style to your tooltip element.

I've updated your fiddle: http://jsfiddle.net/DmnMQ/3/ and it's running OK.

Hope this helps. Cheers

Answer 3

Why dont you use the tiptip jquery plugin found in the link below since its much simpler.

http://code.drewwilson.com/entry/tiptip-jquery-plugin

You can wrap your code inside a span like so and let the plugin take care of the rest. No point in reinventing the wheel.

<td><span class="tiptipClass" title="your tooltip text here">1</span></td>