Question

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

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.