Convert this custom JQuery tooltip script into a Jquery plugin

前端 未结 2 822
温柔的废话
温柔的废话 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:33

    Try this

    $.fn.meliaTooltip = function(options){
    
    return this.each(function(){
    /*OPCIONES DEL PLUGIN*/
            //var selector = '.disparador'; //elemento que activará el tooltip
    
            //You can take all the below settings from options param
            var tooltip = '.miTooltip';   //elemento con el contenido HTML a mostrar por el tooltip
            var tiempo_espera = 0;        //tiempo que el tooltip esperará a desaparecer una vez el raton se salga del disparador
            var seguir_raton = true;      //booleana que determina si el tooltip debe seguir el movimiento del raton o no
            var ajuste_top = 0;           //distancia vertical de ajuste
            var ajuste_left = 0;          //distancia vertical de ajuste
            var fade_time = 300;          //tiempo de la transición de mostrar/ocultar
            /*ARCHIVOS NECESARIOS DEL PLUGIN - NO TOCAR*/
    
    
    
    
            /* Detectar que el raton pasa por encima */
            $(this).hover(function(e) {
              /*Guardamos el selector del disparador y de tooltip en una variable*/
                var disp = $(this);
                 var tip= disp.next(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)+ajuste_left+'px',
                        top: e.clientY-$(tip).height()*3/2+ajuste_top+'px'
                    }).fadeIn(fade_time);
    
            });
            /* En caso de que se mueva el raton */
            $(this).bind('mousemove', function(e){
                if(seguir_raton==true){
                    var disp = $(this);
                    var tip= $(this).next(tooltip);
                   $(tip).css({
                       /*Pues recolocamos el tooltip*/
                        left: e.clientX-($(tip).width()/2)+ajuste_left+'px',
                        top: e.clientY-$(tip).height()*3/2+ajuste_top+'px'
                    });
                }
            });
    
            $(this).mouseout(function() {
                /*añadimos tiempo_espera por si el usuario se sale sin querer*/
                t = setTimeout("$('"+tooltip+"').fadeOut("+fade_time+")",tiempo_espera);
            });
       });
    };
    

    Usage

    $("#testTooltip").meliaTooltip();
    

提交回复
热议问题