jquery create a tooltip that does not disappear

Question

Hello,

I am looking to build a tooltip that allows the user to click links within that tooltip to allow them to navigate to various sections of the site. My problem is that the tooltip disappears when I leave the a with my mouse? what I want is for the tool tip to disappear if I change to a new a or click close on the tooltip, my jquery is as below currently,

    $(document).ready(function() { 

    /*
     * Rollover jobwall logo and show job tooltip
     */
     $('ul#jobs li a').mouseenter(function(){
            var $this = $(this);
            $this.addClass('active');
            $.ajax({
                type: 'POST',
                url: '/jobwall/job_tooltip',
                data: 'employer_id='+$(this).attr('rel'),
                success:function(html) {
                    //alert($this);
                    $this.tooltip({ effect: 'slide'});
                }
            });
        }).mouseleave(function(){
            $(this).removeClass
            $('#tooltip').remove();
        });


});

How can I make it so that the tooltip appears on mouse enter of an a button only disappear when the user closes it through clicking a close button, or moving to a new a allowing the user to actually enter the tooltip without it disappearing.

Answer 1

I would look at hoverintent instead of mouseenter and mouseleave.

On the mouse leave event, you need to check to see if the mouse is located in the tooltip. If not, you can close it.

Answer 2

Moving $('#tooltip').remove(); to the top of the mouseenter function should do the trick. This will not remove the tooltip when the mouse leaves and will remove it if it exists when a new a is entered.
This assumes that 1) you already have a close function and 2) $('.active').append(html); creates #tooltip.

As commented by Chris though, this may be frustrating for users.