Convert this custom JQuery tooltip script into a Jquery plugin

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?

But i have .selector as a variable and it should actually be the selector, right?? — Toni Michel Caubet
– Toni Michel Caubet, Commented Aug 31, 2011 at 12:01

Charles Ouellet · Accepted Answer · 2011-08-31 12:15:48Z

2

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
});

edited Aug 31, 2011 at 12:15

answered Aug 31, 2011 at 12:09

Charles Ouellet

6,5364 gold badges45 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Toni Michel Caubet Over a year ago

aha!!! and i would init like: $('.selector').meliaTooltip({'.miTooltip',true,0,0,300}); (i know it doesn't make any sense to init to the default values but its to know if that would be the order)???

Charles Ouellet Over a year ago

I have modified my answer to show you how to pass the parameters you want. You don't need to have an order, you just have to pass a json object and the $.extend method will override the properties that need to

Charles Ouellet Over a year ago

By the way, I modified my example, the way I was using extend was not right

ShankarSangoli · Accepted Answer · 2011-08-31 12:06:49Z

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 = '<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 */
        $(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();

Thank you, i have two questions now: (1) how do i init it??? (2-related to 1) how can i pass the parametres and relate them with the options i have at the beggining of the code?? thanks a lot again!

Collectives™ on Stack Overflow

Convert this custom JQuery tooltip script into a Jquery plugin

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related