jQuery selector mouseover <select> stops working when I over an <option>

Question

I wrote a jQuery tooltip plugin which is:

 (function ($) {
    $.fn.meliaTooltip = function (options) {
        var defaults = {
            tooltip: '.miTooltip',
            tiempo_espera: 0,
            seguir_raton: true,
            ajuste_top: 0,
            ajuste_left: 0,
            fade_time: 300,
            bind_mode: 'click'
        };

        var opts = $.extend(defaults, options);

        $(this).each(function() {
            $(this).bind(opts.bind_mode,function(e) {
               // alert('has hecho '+opts.bind_mode+' en '+$(this).attr('id'));
                /*Guardamos el selector del disparador y de tooltip en una variable*/
                var disp = $(this);
                
                var tip = disp.next(opts.tooltip);
                var tip_text = tip.html();
                
                var new_content = '<span class="melia_tooltip_left"></span ><span class="melia_tooltip_contenido">' + tip_text + '</span ><span class="melia_tooltip_right"></span ><span class="melia_tooltip_bottom"></span >';
                tip.html(new_content);
                if (typeof t != 'undefined') {
                    /*reiniciamos tiempo_espera*/
                    clearTimeout(t);
                }
                //alert('has hecho '+opts.bind_mode+' en '+disp.attr('id')+'y ahora vamos a mostrar'+tip_text+'que esta en '+tip.attr('class'));
                $(tip).css({
                        //colocamos el tooltip según el ratón y el tamaño del tooltip
                        left: e.clientX - ($(tip).width() / 2) + opts.ajuste_left + 'px',
                        top: e.clientY - $(tip).height() * 3 / 2 + opts.ajuste_top + 'px'
                }).fadeIn(opts.fade_time);
                //alert(e.clientX - ($(tip).width() / 2) + opts.ajuste_left);
                //alert(e.clientY - $(tip).height() * 3 / 2 + opts.ajuste_top);
                
                
            });

            $(this).bind('mousemove', function(e) {
                if (opts.seguir_raton) {
                    var disp = $(this);
                    var tip = $(this).next(opts.tooltip);
                    $(tip).css({
                            /*Pues recolocamos el tooltip*/
                            left: e.clientX - ($(tip).width() / 2) + opts.ajuste_left + 'px',
                            top: e.clientY - $(tip).height() * 3 / 2 + opts.ajuste_top + 'px'
                        });
                }
            });

            $(this).mouseout(function() {
                /*añadimos tiempo_espera por si el usuario se sale sin querer*/
                t = setTimeout("$('" + opts.tooltip + "').fadeOut(" + opts.fade_time + ")", opts.tiempo_espera);
            });
        });
    };
})(jQuery);

$('select#id).meliaTooltip({}) works fine, but when I mouseover one of the options the tooltip fades out, how can I keep the selector for the children?

And even if I apply it to another kind of tag, example:

<div id="selector"><div><div>Still work here</div></div>

Answer 1

Use mouseenter and mouseleave events instead of mousemove.