JQuery Hover Tip

Question

I am trying to modify the following script to show/hide the Tip only when the "?" is hovered on and not the entire "li" Block

The HTML:

<ul class="tips">
<li>
    <a href="#" class="tooltip">?</a> Feature 1
    <div class="tip">
    <h4>Tip Title 1</h4>
    <h4>Tip Q</h4>
    <p>Tip A</p>
    </div>
</li>
<li>
    <a href="#" class="tooltip">?</a> Feature 2
    <div class="tip">
    <h4>Tip Title 2</h4>
    <h4>Tip Q</h4>
    <p>Tip A</p>
    </div>
</li>
<li>
    <a href="#" class="tooltip">?</a> Feature 3
    <div class="tip">
    <h4>Tip Title 3</h4>
    <h4>Tip Q</h4>
    <p>Tip A</p>
    </div>
</li>
</ul>

The JQuery script

$("ul.tips li").hover(function() {
    $(this).find("div").stop()
    .fadeIn()
    .css("display","block")

}, function() {
    $(this).find("div").stop()
    .fadeOut()
});

The CSS:

.tips div  {
display: none;
position: absolute;
bottom: 0;
width: 100%;
height;auto;
background: #e00;
left:0;
}​​​​​​​​​

I have tried to modify the script like so

$("ul.tips li a").hover(function() {

so it targets the "a" tag but the it ends up not showing anything.

Answer 1

That seems unusual as it seems like it should work, but try:

$(".tooltip").hover(function() { ... });

You should also change the $(this).find("div")... to $(this).next()...

Answer 2

You need to end your lines of js:

$("ul.tips li a").hover(function() {
    $(this).siblings("div.tip").stop()
    .fadeIn()
    .css("display","block"); // <-- gotta put the semi-colon

}, function() {
    $(this).siblings("div.tip").stop()
    .fadeOut(); //<-- here too
});

Answer 3

You need to make sure that you wrap your event handler in the in jQuery's document ready function:

$(document).ready(function () {
$("ul.tips li").hover(function() {
    $(this).find("div").stop()
    .fadeIn()
    .css("display","block")

}, function() {
    $(this).find("div").stop()
    .fadeOut()
});
});

Your hover event won't bind to the html elements unless the html elements have been loaded into the DOM tree already. $(document).ready() delays running the JS included in the passed anonymous function until the rest of the html document is loaded and the DOM tree is ready.

More reading at: http://docs.jquery.com/Tutorials:Introducing_$(document).ready()