Question

I’m creating a jQuery plugin to display a tooltips. I would like to add an option that toolitp would acts as dropdown menu. I mean that when I move cursor over a tooltip i can click a link inside that tooltip. The problem is that when i’m going to move a cursor over a tooltip he disappears which in this case is not welcome.

JavaScript (example):

(function($) {

$.fn.jTooltip = function(options) {

    var defaults = {
        'location': 'right',
        'menu': false,
        'className': 'default',
        'content': 'tooltip content',
        'top': 0,
        'left': 0,
        'overlay': false,
        'zIndex': 2000
    },
        settings = $.extend({}, defaults, options);
    this.each(function() {
        var $this = $(this);
        $this.mouseover(function() {
            if (settings.menu) {
                $(this).addClass('menu');
                $(document).on('mouseleave', '.show-tip', function() {
                    $(".tip-top").remove();
                });
            }

            if (settings.location == 'bottom') {
                thisCss = {
                    'top': $this.offset().top + $this.innerHeight() + 10 + settings.top,
                    'left': $this.offset().left + settings.left,
                    'z-index': settings.zIndex
                };
            }
            if (settings.location == 'right') {
                thisCss = {
                    'top': $this.offset().top - $this.innerHeight() + 5 + settings.top,
                    'left': $this.offset().left + $this.innerWidth() + 5 + settings.left,
                    'z-index': settings.zIndex
                };
            }
            $('<div id="jTooltip" />').appendTo('body').html(settings.content).addClass(settings.className).css(thisCss);
            if (settings.overlay) {
                $('<div id="overlay" />').appendTo('body').css({
                    'opacity': 0.5,
                    'background': '#000',
                    'position': 'absolute',
                    'left': 0,
                    'top': 0,
                    'z-index': 1000,
                    'width': '100%',
                    'height': '100%'
                });
            }
        });
        $(this).mouseleave(function() {
            $("#jTooltip").remove();
        });
        return this;
    });
};

})(jQuery);
$('.show-tooltip').jTooltip({
    'location': 'bottom',
    'menu': 'true'
});​

Answer 1

I would give the user a second or two to get to the context menu, if the user gets on the context menu then the menu stays or else hides.

$(this).mouseleave(function() {
                t = setTimeout(function() {
                    $("#jTooltip").remove();
                }, 2000);
                $('#jTooltip').hover(function() {
                    clearTimeout(t);
                }, function() {
                    $(this).remove();
                });
            });

Fiddle – http://jsfiddle.net/rWRV5/1/