CODEWITHSUNDEEP
jquerytooltip
Shahin
Shahin

Reputation: 12843

jQuery tooltip on table cell

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

Upvotes: 0

Views: 12337

Answers (3)

kasdega
kasdega

Reputation: 18786

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.

Upvotes: 6

Harindaka
Harindaka

Reputation: 4898

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>

Upvotes: -1

Edgar Villegas Alvarado
Edgar Villegas Alvarado

Reputation: 18344

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

Upvotes: 1

Related Questions