Tooltip with jquery and css [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.

---

Want to improve this question? Update the question so it focuses on one problem only by editing this post.

Closed 8 years ago.

Improve开发者_如何转开发 this question

How can make a tooltip with jquery and css for following HTML? (i mean, this is that when mouse enter on li a displaying content class show_tooltip)

<ul>
    <li>
    <a href="#">about</a>
    <div class="show_tooltip">
        put returns between paragraphs
    </div>
    </li>
    <li>
    <a href="#">how</a>
    <div class="show_tooltip">
        for linebreak add 2 spaces at end
    </div>
    </li>
</ul>

---

$("li a").mouseover(function(){
     $(this).next().fadeIn();
})
$("li a").mouseout(function(){
     $(this).next().fadeOut();
})

---

why not just do this? :)

<ul>
    <li>
    <a href="#" title="put returns between paragraphs">about</a>
    </li>
    <li>
    <a href="#" title="for linebreak add 2 spaces at end">how</a>
    </li>
</ul>