Convert this custom JQuery tooltip script into a Jquery plugin

前端 未结 2 785
温柔的废话
温柔的废话 2021-01-27 11:44

I -with some stackoverflow users help- have developed this tooltip script using Jquery and general Javascript,

    

        
2条回答
  •  失恋的感觉
    2021-01-27 12:32

    It should look like this:

    (function ($) {
        $.fn.meliaTooltip = function (options) {
            var defaults = {
                tooltip: '.miTooltip',
                tiempo_espera: 0,
                seguir_raton: true,
                ajuste_top: 0,
                ajuste_left: 0,
                fade_time: 300
            };
    
            var opts = $.extend(defaults, options);
    
            $(this).each(function() {
                $(this).hover(function(e) {
                    /*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();
                    //alert(tip_text);
                    var new_content = '' + tip_text + '';
                    //alert(new_content);
                    tip.html(new_content);
                    if (typeof t != 'undefined') {
                        /*reiniciamos tiempo_espera*/
                        clearTimeout(t);
                    }
                    $(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);
    
                });
    
                $(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);
    

    usage:

    $("#selector").meliaTooltip({
        tooltip: '.miTooltip',
        fade_time: 300
    });
    

提交回复
热议问题