Jquery Hidden DIV Mouseover Tooltip

Question

I've researched this quite well but haven't managed to find anything, it would of probably been quicker to write it myself! I have content contained within 'li' tags, within the the li are DIVs which are hidden from the user. I'm basically looking for something that when you mouseover the specific li, the div contained within it pops up and hovers in relation to the mouse all the time the cursor is over the li. does anyone know something that will do exactly that?

Solution 1

You can accomplish this with just a bit of jQuery and CSS:

HTML:

<ul>
    <li>
        <div>Content goes here</div>
        <div class="tooltip">Tooltip!</div>
    </li>
    <li>
        <div>More content!</div>
        <div class="tooltip">Another tooltip!</div>
    </li>
</ul>

CSS:

.tooltip {
    position:absolute;
    display:none;
    z-index:1000;
    background-color:black;
    color:white;
    border: 1px solid black;
}

JavaScript:

$("li").bind("mousemove", function(event) {
    $(this).find("div.tooltip").css({
        top: event.pageY + 5 + "px",
        left: event.pageX + 5 + "px"
    }).show();
}).bind("mouseout", function() {
    $("div.tooltip").hide();
});

Here's what's happening:

1. An event handler for the mousemove event is attached for every list item.
2. Inside this listener, the find method is used to find the div with class tooltip that lives under the li that the event occurred on.
3. The top and left CSS properties are set according to the location the event occurred on (the current location of the mouse) and the div is shown.
4. Another event handler for the mouseout event is attached that hides any tooltips that are showing.

You can tweak the selectors to reflect your exact HTML structure. Here's a working example: http://jsfiddle.net/andrewwhitaker/tSHZS/

Solution 2

Will this work for you?

http://flowplayer.org/tools/tooltip/index.html

I'm not sure if it specifically handles your scenario, where you want to show the contents of the div on mouseover of the li, but I know it can display HTML content.

Comments

[Daniel]

Wow thanks for the quick response everyone! I've opted for updating the css dynamically with: top: (e.pageY ) + "px" etc... but the displaying DIV is really far from the cursor. I tried to position parent elements relative but that just ends up with the DIV with top:1000px+ which I can't get my head round, has anyone experienced trouble with this before?

[Vinoth]

page not found.