jquery tooltip hover / rollover consistencey

So working on a site that has big tooltips with text and an icon inside when you rollover a button. Only problem is that sometimes its a bit inconsistent, where a tooltip will appear when you havent rolled over it, or they get stuck and dont disappear when they should.

My Jquery:

$('#main_services ul li').hover(function() {
    $('div.bubup', this).fadeIn('slow');
},
function() {
    $('div.bubup', this).hide();
});

HTML Markup:

<div id="main_services">
    <ul>
        <li><a class="top" href="http://google.com">Button 1</a>
            <div class="bubup bi-1" style="display: none;">
                <div class="bubup-top"><div class="bubup-lip"><!-- --></div></div>
                <div class="bubup-middle">
                    <div class="bubup-content"><div class="bubup-icon"><!-- --></div><div class="margin-top4">Proin enim tellus, pharetra nec luctus id, malesuada at metus. In eu tincidunt justo. Sed et ante fringilla sapien pulvinar fringilla ac a nisl. Quisque vitae tortor sapien. Ut consequat libero posuere quam mollis eleifend. Phasellus iaculis odio in tortor egestas a pellentesque mi tincidunt. </div><div class="clear"><!-- --></div></div>
                </div>
                <div class="bubup-bottom"><!-- --></div>
            </div>
        </li>
        <li><a class="top" href="http://google.com">Button 2</a>
            <div class="bubup bi-2" style="display: none;">
                <div class="bubup-top"><div class="bubup-lip"><!-- --></div>开发者_运维百科</div>
                <div class="bubup-middle">
                    <div class="bubup-content"><div class="bubup-icon"><!-- --></div><div class="margin-top4">Proin enim tellus, pharetra nec luctus id, malesuada at metus. In eu tincidunt justo. Sed et ante fringilla sapien pulvinar fringilla ac a nisl. Quisque vitae tortor sapien. Ut consequat libero posuere quam mollis eleifend. Phasellus iaculis odio in tortor egestas a pellentesque mi tincidunt. </div><div class="clear"><!-- --></div></div>
                </div>
                <div class="bubup-bottom"><!-- --></div>
            </div>
        </li>
    </ul>
</div>

Dont really want to link to the site its on, however if needed I can isolate the code and put it on a demo link.

So question is, is there anyway obvious things i am missing to make the transitions nice and reliable?

You might want to try adding a .stop(true,true) right before you .fadeIn, that may solve your problem. If it doesn't then I'll need to see a demo link.