Question

<script>
$(document).ready(function(){
   $("#nav li h3").hover(function() {
      $(this)
      .parent("li")
      .find("p")
      .css({
         position:"absolute"
      })
      .removeClass("hidden")
      .stop()
      .animate({opacity: 1}, "fast");
   }, function() {
      $(this)
      .parent()
      .find("p")
      .stop()
      .animate({opacity: 0}, "fast");
});
</script>

and html

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<ul id="nav">
   <li>
      <table>
         <tr>
            <td><h3>name</h3></td>
         </tr>
      </table>
      <p class="hidden">description</p>
    </li>
</ul>

… and css style:

.hidden {
display: none;
}

when i hover name is result not show tooltip of

tag, how to fix ?

Answer 1

I found the following errors in your code:

1. A syntax error. You were missing a closing })
2. .parent("li") needs to be changed to .closest("li") in two places because .parent() only looks up one level
3. The position: absolute is not needed if you want it to display in place where it is in the HTML
4. You can just use .fadeIn() and .fadeOut() instead of removeClass() and .animate().
5. When you call .stop(), you want to also clear it from the queue with .stop(true).

This code will work:

$(document).ready(function(){
   $("#nav li h3").hover(function() {
      $(this)
      .closest("li")
      .find("p")
      .stop(true)
      .fadeIn("fast");
   }, function() {
      $(this)
      .closest("li")
      .find("p")
      .stop(true)
      .fadeOut("fast");
   });
});

Working demo here: http://jsfiddle.net/jfriend00/3A4fv/

I realized this can be done much shorter like this:

$(document).ready(function(){
   $("#nav li h3").hover(function() {
      $(this)
      .closest("li")
      .find("p")
      .stop(true)
      .fadeToggle("fast");
   });
});

Working demo of this one here: http://jsfiddle.net/jfriend00/QCEy6/