Question

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

    <script type="text/javascript">

$(document).ready(function(){
        /*OPCIONES DEL PLUGIN*/
        var selector = '.disparador'; //elemento que activará el tooltip
        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 */
        $(selector).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 = '<span class="left"></span ><span class="contenido">'+tip_text+'</span ><span class="right"></span ><span class="bottom"></span >';
             //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 */
        $(selector).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'
                });
            }
        });

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



</script>

It has some variables at the beggining and they are all optional as they have all initial values, but i’d like to be able to be variables for the init,

According to this: tutorial i need to do something like:

    (function($){

    $.fn.meliaTooltip = function(options){


    // code will be added here.

    }
})(jQuery);

But I’m not sure if i have to pase the code in there and how exactly define the options (asuming options are the parametres to be used as my variables)

Anyone feels like giving me a push?

Answer 1

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 = '<span class="left"></span ><span class="contenido">' + tip_text + '</span ><span class="right"></span ><span class="bottom"></span >';
                //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
});