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>