javascript - Text tooltip on mouseover -

I have a set of bullets, and I want to make a tooltip when I mouse over each of them, Separating tooltip text bullets can be a title tag, and it should be output in tooltip container. Newbie to JavaScript so this is where I need help.

Here's my CSS:

  .container ul {width: 300px; Height: 30px; Display area; Background: #ccc; }. Container li {width: 28px; Height: 28px; Display area; Swim left; Limit: 1 px solid #fff; } .tooltip {width: auto: height: 12px; Display area; }   
 My HTML:  
  & lt; Div id = "tooltip" class = "tooltip" & gt; & Lt; / Div & gt; & Lt; Div class = "container" & gt; & Lt; Ul & gt; & Lt; Li class = "book" title = "book" & gt; & Lt; / Li & gt; & Lt; Li class = "movie" title = "movie" & gt; & Lt; / Li & gt; & Lt; Li class = "tv" title = "tv" & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt;   
 and my javascript:  
  & lt; Script & gt; $ (Document) .ready (function () {$ ("ul li"). Mouseover (function () {$ ("# tooltip"). Text ($ (this) .attr ("title"))}}; }};     
 
 
 replace  
  $ ("# tooltip") .text ("this.val (alt)")   
 to  
  $ ( "# Tooltip"). Text ($ (this) .attr ('alt'));