Comunidad de diseño web y desarrollo en internet online

Plugin generador de tooltips en jQuery / Javascript

Vengo con un plug-in recien salidito del horno. Hace mucho vengo pensando en este plug-in pero no había tenido tiempo de realizarlo. Se trata de un plug-in para jQuery para colocar tool-tips con facilidad. Se que hay muchos en la red pero este es el que humildemente he diseñado y público aquí par el uso indiscriminado de quien lo necesite. Es casi casi 100% configurable aunque aun le faltan unos toques que iré puliendo y publicando a medida que los termines.

ToolTip para jQuery


Requisitos:
  • Tener el Framework jQuery en tu sitio web.
  • Tener cualquier de los themes de jQuery
  • Descargar el archivo jquery.tooltip.js


Aqui el Script, lean los comentarios. Ahí dice cómo usarlo.

Código :

/*!
 * Plug-In      :   jQuery ToolTip 1.0
 * Version      :   1.0
 * Autor         :   César Noblecila
 * Descripción   :   Este plugin facilita la creación de tooltips en un documento
 * Liberado      :   2010-08-23 GMT-500
 * Archivo         :   jquery.tooltip.js
 * Dependencias   :   jQuery v1.4.2      (JS)
 *                        jQuery-UI Theme   (CSS)
 *
 * Opcion      Tipo      Default      Descripcion
 ----------------------------------------------------------------------------------------------------------
 * width      (num)      200         Ancho del tooltip
 * icon      (alpha)   "ui-icon-info"   Icono a usar para indicar la existencia de un tip
 * height      (num)      null         Altura del tooltip
 * delay      (num)      1500         Milidegundos de permanencia en pantalla despues de abandonar el hover
 * fxIn      (alpha)   "fadeIn"      Efecto usado para aparecer el tooltip
 * fxOut      (alpha)   "fadeOut"      Efecto usado apra desaparecer el tooltip
 * bgImage      (alpha)   "none"      Imagen de fondo par el tooltip
 * bgColor      (alpha)   "#FFF"      Color de fondo para el tooltip
 * color      (alpha)   "#333"      Color del Texto
 * opacity      (num)      90         Opacidad del Tooltip (0-100)
 * align      (alpha)   "justify"      Alineacion del texto
 * fontFamily   (alpha)   "Verdana"      Nombre de la fuente a emplear
 * fontSize      (num)      9         Tamaño de la fuente
 * title      (alpha)   "Tip:"         Titulo del Tolltip
 * action      (alpha)   "click"      Accion que dispara el tooltip opciones: ( "click" | "hover" )
 ----------------------------------------------------------------------------------------------------------
 *
 * Sintaxis 
 * ---------
 * JS      :   $(selector).tooltip({[opcione:valor[,opcion:valor[...]]]});
 * HTML   :   <div id="demo">Cualquier Texto.<span class="tooltip">Aqui el texto del tooltip</span></div>
 *
 * Es necesrio que el texto del tooltip este dentro de cualquier etiqueta HTML Standar o Personalizada pero
 * siempre con la clase "tooltip".
 *
 */
 
(function($) {
   $.fn.tooltip   =   function(opciones_user) {
      opciones_default = {
         width            :   200,
         icon            :   "ui-icon-info",
         height         :   null,
         delay            :   1500,
         fxIn            :   "fadeIn",
         fxOut            :   "fadeOut",
         bgImage         :   "none",
         bgColor         :   "#FFF",
         color            :   "#333",
         opacity         :   90,
         align            :   "justify",
         fontFamily   :   "Verdana",
         fontSize      :   "9",
         title            :   "Tip:",
         action         :   "click"
      }
      var op = $.extend(opciones_default , opciones_user);
      this.each(function($i){
         $this         =   $(this);
         $id            =   $this.attr('id');
         $id==''?$id="Tip"+$i:null;
         $tip         =   $('.tooltip:first',$this).html();
         $opacity   = (op.opacity/100);
         if ($tip!='' && $tip!=undefined) {
            if (op.title!='') { $tip         =   '<strong style="font-size:10px;">'+op.title+"</strong><br/>"+$tip; };               
            $('.tooltip').remove();
            $this.css({'float':'left'});
            $idIcon   =   $id+'-tt_icon';
            $idBox   =   $id+'-tt_box';
            var   icon         =   '<span id="'+$idIcon+'" class="ui-icon '+op.icon+'"></span>';
            var container   =   '<div id="'+$idBox+'" class=" ui-corner-tr ui-corner-bl ui-corner-br ui-widget-content" >'+$tip+'</div>';
            $this.append(icon);
            $this.append(container);
            $Icon   =   $('#'+$idIcon);
            $Icon.css({'display':'inline-block','cursor':'help'});
            $Pos   =   $Icon.position();
            $l      =   $Pos['left']+10;
            $t      =   $Pos['top']+10;
            $Box   =   $('#'+$idBox);
            $Box.css({
               'float':'left',
               'position':'absolute',
               'left':$l+'px',
               'top':$t+'px',
               'width':op.width+'px',
               'color':op.color,
               'background-image':op.bgImage,
               'background-color':op.bgColor,
               'padding':'3px 6px !important',
               'display':'none',
               'opacity':$opacity,
               'filter':'alpha(opacity='+op.opacity+')',
               'text-align':op.align,
               'z-index':'999',
               'overflow':'auto',
               'line-height':'1.5em',
               'font-family':op.fontFamily,
               'font-size':op.fontSize+"px"
            });
            op.height==null?$h=$Box.height():$h=op.height;
            $Box.css({'height':$h+'px'});
            $status=0;
            if (op.action=="click") {
               $Icon.click(function(){
                  if($status==0) {
                     $status=1;
                     setTimeout("$Box."+op.fxIn+"(); clearTimeout($timer)",1);
                     $timer   =   setTimeout("$Box."+op.fxOut+"(); clearTimeout($timer); $status=0;",op.delay);
                  };
               });
            } else if (op.action=="hover") {
               $Icon.hover(function(){
                  if($status==0) {
                     $status=1;
                     setTimeout("$Box."+op.fxIn+"(); clearTimeout($timer)",1);
                  };
               },
               function(){
                  $timer   =   setTimeout("$Box."+op.fxOut+"(); clearTimeout($timer); $status=0;",op.delay);
               });
            } else {
               return false;
            };
            $Box.hover(
               function(){
                  clearTimeout($timer);
               },
               function(){
                  $timer   =   setTimeout("$Box."+op.fxOut+"(); clearTimeout($timer); $status=0;",op.delay);
               }
            );
         };
      })
   }
})(jQuery);


Cualquier duda avísenme, cualquier error también asi podre mejorarlo, aportes también son aceptados. Falta en este plugin hacer que detecte si el ancho del tooltip rebasaría los limites de la pantalla al mostrarse hacia la derecha y por tanto en automático lo muestre hacia la izquierda lo mismo con hacia abajo y arriba.

COPY, PASTE, PLAY AND ENJOY.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate