Question

I have a set of bullets, and I’d like to create a tooltip when I mouse over each of them individually. The tooltip text can be the bullets title tag, and it needs to be outputted into a tooltip container. Newbie to javascript so this is where I need the help.

Here’s my CSS:

.container ul { width: 300px; height: 30px; display: block; background: #CCC;  }
.container li { width: 28px; height: 28px; display: block; float: left; border: 1px solid #FFF; }
.tooltip { width: auto: height: 12px; display: block; }

My HTML:

<div id="tooltip" class="tooltip"></div>
<div class="container">
    <ul>
        <li class="book" title="book"></li>
        <li class="movie" title="movie"></li>
        <li class="tv" title="tv"></li>
    </ul>
</div>

And my javascript:

<script>
$(document).ready(function(){
    $("ul li").mouseover(function() {
         $("#tooltip").text($(this).attr("title"));
    });
});
</script>

Answer 1

change from

$("#tooltip").text("this.val(alt)")

to

$("#tooltip").text($(this).attr('alt'));