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

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
});