Sexy ToolTips

Sexy ToolTips

Sexy Tooltips te permite crear tooltips realmente sexys. Reemplaza esos feos, aburridos y amarillos tooltips del navegador, por unos con toda la onda!

  • Estilo: Puedes elegir entre varios estilos.
  • Posición: Método de posicionamiento inteligente.
  • Compatibilidad: Trabaja en todos los navegadores modernos.

6, 7, 8
3.0, 3.5
1.5, 2.0
3
9.64, 10
4

Demo

Puedes ver una demo de Sexy Tooltips clickeando en la siguiente imagen:

demo

Instalación

En el caso de MooTools:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.3/mootools-yui-compressed.js"></script>

<script type="text/javascript" src="js/sexy-tooltips.v1.1.mootools.js"></script>
<link rel="stylesheet" href="js/sexy-tooltips/coda.css" type="text/css" media="all"/>

o en jQuery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>

<script type="text/javascript" src="js/sexy-tooltips.v1.1.jquery.js"></script>
<link rel="stylesheet" href="js/sexy-tooltips/coda.css" type="text/css" media="all"/>

Donde… :
coda.css es el nombre del estilo a usar. Puedes elegir entre estos estilos:

  • blue.css
  • coda.css
  • vista.css
  • rosita.css
  • hulk.css
  • msn.css

Usando Sexy ToolTips

En MooTools:

<script type="text/javascript">
  document.addEvent('domready', function() {
    $('a1').tooltip ('<h1>Title Formating</h1><p>Example of simple tooltip.</p>', {
      width: 200,
      style: 'alert',
      sticky: 1,
      hook: 1
    });
  });
</script>

En jQuery:

<script type="text/javascript">
  $(document).ready(function(){
    $('#a1').tooltip ('<h1>Title Formating</h1><p>Example of simple tooltip.</p>', {
      width: 200,
      style: 'alert',
      sticky: 1,
      hook: 1
    });
  });
</script>

Donde… $(’a1′) es un elemento de la página. Puedes poner tooltips a cualquier elemento del DOM.

Documentación

  • tooltip()

    Element.tooltip(content, options)

    Crea el tooltip para ese elemento.

    @content (string) El mensaje a mostrar.

    @options (array) Opciones del estilo del tooltip.

    Ejemplo:

    $('example').tooltip('Hello world.', { mode: 'tl', width: 140, hook: 1 });
    

  • tooltip_hide()

    Element.tooltip_hide()

    Oculta el tooltip.

  • options
    • width – (number: default to 250) Ancho total del tooltip. Tener en cuenta que el contenedor tiene 15px menos de cada lado.
    • mode – (string: default to ‘auto’) Posición del puntero. Este parámetro acepta un string de 2 caracteres (obligatorio) donde la primer letra puede ser ‘t’ (Top) o ‘b’ (Bottom) y la segunda letra puede ser ‘l’ (Left) o ‘r’ (Right). Si se establece este parámetro a ‘auto’ el script calculará la mejor posición para mostrar el tooltip.
    • hook – (boolean: default to false) El tooltip se mueve a medida que movemos el puntero del mouse.
    • mouse – (boolean: default to true) El tooltip se muestra al pasar el mouse por arriba del elemento.
    • click – (boolean: default to false) El tooltip se muestra al clickear el elemento. Se desactiva el parámetro ‘mouse’ al establecer este parámetro a ‘true’.
    • sticky – (boolean: default to false) Establezca este parámetro a ‘true’ si desea que el tooltip muestre un botón para cerrarse.
    • style – (string: default to ‘default’) Corresponde a la clase para el contenedor del mensaje. Útil si deseas agregar estilos propios.

Eventos

  • event tooltipshow()

    Evento lanzado cuando el tooltip termina de mostrarse.

    MooTools:

    $('element').addEvent('tooltipshow', function() {
        alert('tooltip event fired');
    });
    

    jQuery:

    $('element').bind('tooltipshow', function() {
        alert('tooltip event fired');
    });
    

  • event tooltiphide()

    Evento lanzado cuando el tooltip termina de cerrarse.

    MooTools:

    $('element').addEvent('tooltiphide', function() {
        alert('tooltip event fired');
    });
    

    jQuery:

    $('element').bind('tooltiphide', function() {
        alert('tooltip event fired');
    });
    

Licencia

El script es publicado bajo la licencia MIT.

¿Cuanto cuesta?

Nada. Pero puedes colaborar comprándome un café :roll:

Download

ChangeLog

Sexy ToolTips 1.1 - Octubre 16, 2009
* BugFixed: Textarea scroll bug
* BugFixed: Window scroll bug
* Creada la versión para jQuery
* Agregada Compatibilidad con IE6

Sexy ToolTips 1.0.0 - Septiembre 01, 2009
* Versión Inicial.
* Mootools 1.2.3

Hola, tengo varias inquietudes, a ver si me pueden ayudar:

1) No logro implementar sexylightbox y sexytooltips a la vez. Si lo hago el overlay del sexylightbox no se muestra, la imagen y todo lo demás si al igual que el tooltip pero tengo que dar varias veces click a mi enlace para que se abra el sexylightbox con error js por cierto.

2) Hay forma de reemplazar la info que va en el campo tittle de un enlace para mostrar en sexylightbox por un sexytooltip ??

Cualquier ayuda les agradecería.

Tenia un error en mi sitio, estaba apuntando ambas librerÍas del jquery ( jquery y jquery.min ). Con esto pude solucionar lo del implementar sexylightbox y sexytooltips a la vez.

Pero me falta el punto 2) y ahora agrego un nuevo punto.

3) Como puedo hacer para que me aparezcan los sexytooltips al pasar el mouse por cada elemento que tenga un id igual. Ejemplo: Tengo una galería y las fotos tienen el mismo id=”cliente”, en el código estoy estableciendo el tooltip para #cliente pero solo se muestra en la primer foto, en las demás no.

    Carlete dice:

    Carlos,

    Eso probablemente tiene que ver con que al hacer uso de un ID (#cliente), el jQuery sólo te va a agarrar el primero (Esto se debe a que los ID’s debieran ser únicos en la página).

    Mi recomendación es que cambies el uso del ID a una clase… con eso debería funcionar todo el tema.

    Saludos!!

Jonathan dice:

Hi Eduardo.

I’m trying to add a new feature to your very interesting sexyTooltip.
Indeed, I need to have the ability to have different tooltip on the same element according to a previous action (but there is only one tooltip at the same time on this element).

So I needed a function to rebind a new tooltip and be sure everything created for the previous tooltip on the same element was cleaned.

I wrote this function and would like to have your opinion :

tooltipOverride: function(content, options) {
            var John_Resig = {};
            this.each(function() {
                if (this.OBJtooltip) {
                    this.OBJtooltip.trigger.unbind();
                    this.OBJtooltip.skeleton.close.unbind();
                    this.OBJtooltip.tooltip.remove();

                    this.OBJtooltip = null;
                }
                this.OBJtooltip = new ToolTip().initialize(this, content, options);
                John_Resig = this.OBJtooltip;
            });
            return John_Resig;
        },
Sergio dice:

Hola Eduardo estoy agregando sexytooltips a una pagina.., esta pagina tiene un menu en la parte izquierda, cuando paso por algun enlace con sexytooltip se ver el cartel, paso el mouse por la X se cierra normal, paso por otro tambien se cierra normal pero llega un momento que no puedo hacer clic en los primeros enlaces del menu de la izquierda… si veo que pasa con firegub veo que quedan unos div sobre el menu despues de cerrar los sexytooltips creo que el tema pasa por como quedan los div cuando los ocultas
el div oculto original esta asi
display:none
pero al cerrarse el sexytooltips queda display: block con lo cual queda oculto pero sobre mi menu y no me deja hacer clic habra forma de solucionarlo
Saludos

    Sergio Sam dice:

    me auto respondo le agregue en la linea 249
    display :’none’,
    y se arreglo el problema :-)

    hide: function() {
    this.tooltip.stop();
    this.tooltip.animate({
    opacity : 0,
    display : ‘none’,
    top : this.pos.top – 20
    }, $.extend({}, this.options, {
    complete: $.bind(this, function() {
    if (!this.open) this.tooltip.css({top:0, left:0});
    this.fireevents(2);
    })
    }));
    this.open = false;
    },

      Sergio Sam dice:

      Perdon vi mal agregando esa lina no se arregla sigue el mismo problema…

      El div se oculta pero pisa al menu…

        Sergio Sam dice:

        jua ahora si le pifie de linea

        if (!this.open) this.tooltip.css({top:0, display : ‘none’, left:0});

        ahi quedo

        Saludos :-)

          Nico dice:

          Tuve el mismo problema, con otros enlaces que tenia en la pagina. No me detuve a estudiar bien la solución propuesta, pero funciona con lo que comento Sergio Sam.

          Gracias a ambos!

    Carlete dice:

    Si quieres una solución más limpia (no modificar el core del plugin), puedes hacer uso del evento “tooltiphide”. En jQuery sería algo así:

    $('elemento').bind('tooltiphide', function() {
    $('.sexy-tooltip').css('display','none');
    });

    Saludos!!

Alexis dice:

Hola tengo el siguiente codigo, y quisiera saber si es posible que se repita el .tooltip para las instancias que dura el while, (ya se que no pasa). Quizas alguien sepa como hacerlo.
Saludos.

while ($prod = mysql_fetch_array($result)){

echo”“.$prod['stk_nom'].”“;

?>

$(document).ready(function(){
$(’#a1′).tooltip (’<?php echo"”.$prod['stk_prep'].”"; ?>descripción o precio’, { mode: ‘tr’, width: 200 });
});

<?php
}

Sergio dice:

Se puede colocar algo para colocar con coordenadas en vez de colocar el tooltip en un elemento en la web ?

Ej: Quiero colocar el tooltip en la coordenada X Y de la pagina….

Gracias

aldodager dice:

eduardo,

como hago para que cuando cargue la pagina, aparezcan los tooltips sin necesidad de estar haciendo mouseover o click

hola. quisiera saber como puedo usar el sexy tooltip en una consulta mysql, es decir, en una lista de resultados me muestra el tooltip para cada registro, pero dentro de el tooltip me muestra solo el nombre del primer registro! gracias…

ola. quisiera saber como puedo usar el sexy tooltip en una consulta mysql, es decir, en una lista de resultados me muestra el tooltip para cada registro, pero dentro de el tooltip me muestra solo el nombre del primer registro! gracias…

Mohan dice:

AwE :O SoMe WorK!!

Lex dice:

How can I show one ’sticky’ tooltip at a time?
I need the sticky feature but if you hover over another, then I need it to hide the others.

Thanks

Sergio dice:

Estoy mostrando una dentro del Tooltip, funciona bien en casi todos los navegadores, salvo que en IE7 sólo funciona si lo uso fuera de un FRAME, probé en FF, IE6, IE8 y Chrome. Mi trigger es un mouseover de un .

J.v.C dice:

No pues muy bien hijo lo has logrado!

Sergio dice:

Gracias JvC, quiero mostrar una imagen dentro del Tooltip, pero en IE7 no consigo hacerlo porque mi script corre dentro de un Frame, ¿alguna sugerencia?, fuera del Frame si sirve, también en otros navegadores, pero necesito que funcione en IE7.

dhamasito dice:

Hola que tal alguno de ustedes me podria ayudar con esto:

1.-quiero saber si actualmente en la pagina existe un tooltip activo, si es que esta uno quitarlo y volver a cargar un nuevo tooltip.

var objTOOLTIP = $('#a_o_servicio').tooltip ('<p><strong>Prueba</strong>: Este es una prueba</p>', {width: 200,style:'info'});

if (objTOOLTIP) {	objTOOLTIP.tooltip.remove();//quiero remover el tooltip

//despues de remover el tooltip quiero crearlo de nuevo

var objTOOLTIP = $('#a_o_servicio').tooltip ('<p><strong>Prueba</strong>: Este es una prueba</p>', {width: 200,style:'info'});

}

¡¡van a decir este wey esta loco!!, pero es que me surge un problema al momento de cargar contenido via ajax ya que el tooltip se queda pegado al campo al que se lo puse, entonces resulta que cuando paso de nuevo el cursor por el elemento ahora en lugar de un solo tooltip, tiene 2 tooltips

de antemano gracias.
aver si se puede hacer eso que quiero.

MiguelMich dice:

Saludos Eduardo gran plugin, me he tomado el atrevimiento de agregarle una opción al tooltip para que éste se sitúe en la mitad del elemento, a quien pueda interesar aquí dejo el código:

Línea 288

		if(this.options.over == true){
			var trg = $.extend({}, trg, {
				'top'   : position.top,
				'left'  : parseInt(position.left) + size.x - (size.x/2),
				'width' : 0
			});
		}else{
			var trg = $.extend({}, trg, {
				'top'   : page.y,
				'left'  : page.x,
				'width' : 0
			});
		}

Y agregar la opción en el plugin:

      var defaults = {
        duration      	: 300,
        queue        	: false,
        tooltipClass  	: 'sexy-tooltip',
        style           	: 'default',
		over     			: false,
        width        		: 'auto',
        mode         	: 'auto',
        hook         		: false,
        mouse        	: true,
        click        		: false,
        sticky       		: 0,
        tip          		:
        {
            x : 'c',
            y : 't'
        }
      };
gobygoba dice:

hi,

I try to put a delay before the sexy-tooltip opening. (Like a standard tooltip show in a Browser with the title attribut.)
I think it’s maybe a good future option of sexy-tooltips, you don’t think ? :)

I have add a delay “$(this).delay(1000, function(){…” of 1 second in the “show” fonction of sexy-tooltips, but it does’nt work !
Can you help me please ?

this.tooltip.stop();
        $(this).delay(1000, function(){
	        this.tooltip.animate({
	          opacity : 1,
	          top     : this.pos.top - 10
	        }, $.extend({}, this.options, {
	          complete: $.bind(this, function() {
	            this.tooltip.css({ opacity: '' }); // bug de jQuery, en IE deja vivo el opacity aunque sea = 1
	                                               // En mootools obvio no pasa esto.
	            this.fireevents(1)
	          })
	        }));
        });

Thanks.

    gobygoba dice:

    PS : I used the last version of JQuery 1.4.2

    gobygoba dice:

    I have find a solution. I have modify the function “show” of sexy-tooltips :

        this.tooltip.animate({
              opacity : 0,
              top     : this.pos.top - 10
            }, $.extend({}, {duration:500}, {
              complete: $.bind(this, function() {
            	  this.tooltip.animate({
                      opacity : 1,
                      top     : this.pos.top - 10
                    }, $.extend({}, this.options, {
                      complete: $.bind(this, function() {
                        this.tooltip.css({ opacity: '' }); // bug de jQuery, en IE deja vivo el opacity aunque sea = 1
                                                           // En mootools obvio no pasa esto.
                        this.fireevents(1)
                      })
                    }));
              })
            }));
    

    You can modify the delay time before showing tooltips with a modification of this part of code : “{duration:500}”

gobygoba dice:

if you want used sexy-tooltips for all classic tooltip generated by the title attribut of html tags, you can used this code (for JQuery):

$(document).ready(function() {
   	$("*[title]").each(function(){
   		if($(this).attr("title")!=""){
   			$(this).tooltip($(this).attr("title"), {width: 200});
   		}
   	});
});