how to select a div within a list in jquery

I'm following开发者_开发技巧 a tutorial for a menu bar and I'm having trouble adapting it to use qTip because I cant seem to be able to find a way to select a particular element.

 <div class="leftside">
        <!-- all things in floating left side -->
        <ul id="social">
            <li><a class="rss" href="#"></a>
                <!-- icon -->
                <div id="tiprss" class="tip">
                    <!-- tooltip -->
                    <ul>
                        <li><a href="#">580 Readers</a></li>
                        <li><a href="#"><small>[Subscribe]</small></a></li>
                    </ul>
                </div>
            </li>

I'm trying to fetch the div "tiprss" which I can do by name, but I actually want, for the currently hovered li its child "tip" class... is this doable?

The point is so that I can pass the html in this div tag into qTip as content.

You can bind a mouseover event to $('#social li') like so:

$('#social li').bind('mouseover',function(e){
    $('#qTipID').html($(this).find('.tip').html());
});

I assume the qTip disappears on mouseout, so no need to remove anything since it will be replaced on next mouseover. Here's a working example.

jquery has a hover function that handles this nicely

$('.tip').hover(
     function() {
          var tipdiv = $(this);
          // mouse is over!
     },
     function() {
          var tipdiv = $(this);
          // mouse out!
     }
);

Try: $('li div.tip').text()