CODEWITHSUNDEEP
jqueryhtmlpopuphidden
Daniel
Daniel

Reputation: 21

Jquery Hidden DIV Mouseover Tooltip

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?

Upvotes: 2

Views: 13730

Answers (3)

Andrew Whitaker
Andrew Whitaker

Reputation: 126042

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/

Upvotes: 6

nunopolonia
nunopolonia

Reputation: 14417

EDIT

Understood wrong your question. See the source to this page:

http://www.lbstone.com/reference/jquery/follow_mouse.html

Here you can find the code that does what you want

Upvotes: 0

steve_c
steve_c

Reputation: 6255

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.

Upvotes: 1

Related Questions