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
esutoraiki dice:

Lo que puedo decir es que es realmente fantástico.

Julian dice:

Excelente esta demasiado bonito y practico.
Lastima que todavia no se pueda usar con jQuery.

Saludos y muchisimas Gracias !!!

esutoraiki dice:

Eduardo: Encontré un pequeño bug, ya no van a tener un sistema de foros para realizar preguntas y hacer aportes????

    Eduardo dice:

    En estos dias levanto el foro. ¿Podrías enviarme el bug por mail desde la sección contactenos?

    Gracias.

    ¿Este comentario te ha servido? y colabora con el blog
    Responder
      esutoraiki dice:

      Eduardo ya te envíe el reporte del bug, he encontrado dos, si te puedo colaborar de alguna forma para solucionarlo me avisas. Un saludo

    esutoraiki dice:

    Eduardo: Te envié la solución que yo encontré a uno de los bugs a tu correo, espero te sirva, y ojala encuentres una solución para el otro bug.

Jhon Doe dice:

se ve genial…esperare por la version jquery…para utilizar en mi galeria…ya que tengo problemas en la implementacion con qtip….

Julian dice:

Muchas Gracias Eduardo de verdad que tienes una dedicacion al trabajo envidiable.
Saludos.

galax dice:

sos genial cada vez sorprendes mas, que buen trabajo por ahi de ves en cuando te regalo unos click para retrubuir un poco tu trabajo ,, saludos desde colombia k la pases bien y espero que estes pensando en una clase para desarrollo con php y mysql que maneje conexiones insert select y demas de ante mano te felicito por exelente trabajo los sexy form son geniales…

    Alyen dice:

    tienes que agregar los java en el index.template.php.

    asi:

    
    <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="', $settings['theme_url'], 'sexy-tooltips.js"></script>
    
    <link rel="stylesheet" type="text/css" href="', $settings['theme_url'], 'sexy-tooltips/coda.css" />';
    
Alyen dice:

Muy bueno, me gusta mucho el blog !

Solo tengo un pregunta… Como se hace el efecto este que tiene el “últimos comentarios” ?

Saludos!

j0n4th4ntub3 dice:

muchas grax lo voy a probar ^

Alyen dice:

d nada y suerte xD…

j0n4th4ntub3 dice:

no me sirvio siempre me tira error plantilla en el recent.template.php pero gracias estan buenisimos los tooltip

    Alyen dice:

    El SMF es un poco raro para estas cosas tienes q poner todo el code en php si no va a funcionar.

    As probado hacer un topico en el foro oficial del SMF ? tiene un apartado en español !

    Saludos

j0n4th4ntub3 dice:

ok lo hare haber si alguien se copa por ayudarme ahi grax denuevo

ICTExpress dice:

Thank’s for all. This plug-in very helpful !

DjMiki dice:

Pues si es muy bueno solo que intentaba probarlo, pero estoy utilizando el JCAROUSEL y eso esta trabajado en JQuery, y bueno estoy teniendo problemas, y quisiera saber si la misma solucion que existe en SexyLightbox, sirve?, o que otra puedo utilizar.
Gracias

DjMiki dice:

Bueno Eduardo, ojala me puedas ayudar.
lo que pasa es que intente iomplementar el Sexy ToolsTips, junto con el JCAROUSEL como STT, utiliza Mootools, y JC, utiliza JQuery, hay un conflicto, pense que colocando jQuery.noConflict();, por que como en el JC, coloca ya en sus JS la palabra JQuery, ya no era necesario cambiar nada, entonces pude hacer correr el efecto carrusel, pero no logro ejecutar el STT, y no se a que se deba.

...

Si hay un error de sintaxis, quizas sea yo al publicar el codigo.
Porfavor ayudame o dame una posible solucion, o si ya tienes STT en JQuery, ponlo ya!, Gracias :D . de antemano.

    Eduardo dice:

    DjMiki es muy común que los scripts de mootools no funcionen con jQuery.

    La nueva versión de MooTools está construida para derribar esta barrera, pero esto se hace poco a poco y con paciencia.

    Por ahora seguiré codeando en ambos scripts, pero siempre empiezo por mootools.

    ¿Este comentario te ha servido? y colabora con el blog
    Responder
    Eduardo dice:

    Encontré una solución para tu problema:
    Consiste en que abras el archivo sexy-tooltips.mootools.js y busques y reemplaces lo siguiente:

    $(
    

    debe quedar:

    document.id(
    

    Luego cuando creas el tooltip, lo mismo:

    <script type="text/javascript">
    document.addEvent('domready', function() {
      document.id('a1').tooltip ('example', { width: 200 });
    });
    </script>
    

    Así podrás tener jQuery y MooTools en la misma página, por lo menos hasta que saque la versión en jQuery jeje

    Saludos

    ¿Este comentario te ha servido? y colabora con el blog
    Responder
DjMiki dice:

Muchas gracias Eduardo, si me funciono, muy bien todo, ahora solo are un diseño, ya que deseo un TooTip, oscuro, pero chevere eh, si podrias postear tambien los psd, vcan pues, gracias, otra vez por la respuesta y la gran ayuda, espero a los demas ayuden.
GRACIAS MUCHA SUERTE.

Gerardo dice:

Hola Eduardo
Estoy armando una pagina y ya tengo implementado el SexyLightBox (que funciona perfecto). Tambien implemente el “sexy-tooltips” haciendo document.id( (que le sujeriste a djMiki)
funciona bien en Firefox pero no logro que funcione en Explorer 6… es por la version de explorer?
Gracias!

Gerardo dice:

Eduardo…
omiti decirte que estoy usando la version 1.1. de “sexy Tooltips” que ya tiene la modificacion hecha (document.id() en el archivo sexy-tooltips.mootools.js
Gracias!

felipe dice:

Hola eduardo, como puedo ejecutar el tooltip llamandolo de un click , y que se despliegue en otra area no en la que hice el click probe pero no me funciono saludos.

Eduard dice:

gracias de antemano
podria con jquery atacar a muchos elementos que tengan el mismo id porque lo he provado i solo me funciona con el primer elemento.

hamletrock87 dice:

Que onda, quiero usar los sexy-tooltips junto con el tiny.js, explico, el tiny.js es un javascript para acomodar tablas dinamicamente por cualquiera de los campos que se muestran, al principio me lo jala y todo, pero ya cuando hago uso del acomodado dinamico de mi tabla con el tiny.js, ya no funcionan los sexy-tooltips, si alguien a manejado estos 2 juntos o si saben de como lo puedo solucionar se los agradeceria

saul1 dice:
  $(document).ready(function(){
    $('#a1').tooltip ('Title FormatingExample of simple tooltip.', {
      width: 200,
      style: 'alert',
      sticky: 1,
      hook: 1
    });
  });

este es mi codigo pero en que momento le pongo para el objeto que modifico en mi codigo

    Eduardo dice:

    No entiendo eso de “para el objeto que modifico” pero si a lo que te referis es para el “trigger” osea para el objeto por el cual cuando le pases el mouse salte el tooltip, entonces es en la parte que dice ‘#a1′

    Por ejemplo si tienes lo siguiente:

    <a href="" id="hello">Click Here</a>
    

    Tu código debería ser:

    $('#hello').tooltip(....
    
    ¿Este comentario te ha servido? y colabora con el blog
    Responder
Dhamasito dice:

Oye Eduardo, primeramente un saludo y una felicitación por esta web y por tus proyectos, mmmm aqui viene lo bueno jejeje , hace apenas unos dias empeze a utilizar los sexytooltips que has hecho, bueno mi pregunta es:
¿¿puedes hacer referencia a el tooltip con el DOM???
por ejemplo: $(’tooltip’) asi mas o menos.
ojo no me refiero al objeto que contendra el tooltip, si no al tooltip en especifico.
de antemano gracias.

    esutoraiki dice:

    Dhamasito. Creo que la respuesta es NO debido a que el ST no posee un id. Hasta donde yo sé, y esto me imagino no se puede cambiar debido a que en una misma página pueden existir múltiples ST.

    Eduardo dice:

    Si se puede, te explico como:

    var objTOOLTIP = $('link').tooltip(....);

    objTOOLTIP es el objeto clase del tooltip. Ahora, no se a que parte deseas acceder, pero por ejemplo puedes obtener el div contenedor del tooltip de la siguiente manera:

    objTOOLTIP.tooltip // devuelve el DOM del contenedor
    
    // ejemplo:
    objTOOLTIP.tooltip.css({ opacity: 0.9 });
    
    ¿Este comentario te ha servido? y colabora con el blog
    Responder
dhamasito dice:

mmmmmm, gracias por tu respuesta esutoraiki, esperaba que hubiera una manera de hacer referencia a el tooltip, pero si no se puede ni modo.
hasta luego.

dhamasito dice:

mmmm, Oye Eduardo : Mira creo que encontre un bug del tooltip, ya que este se queda pegado al objeto trigger y nunca desaparece aunque quites el cursor del objeto. Esto ocurre al hacer una selección a la base de datos y quedandote posicionado en el trigger, ahy es cuando se queda trabado el tooltip, por eso pregunte que si habia alguna manera de obtener el dom del tooltip para ocultarlo manualmente con hide();
ojala me puedan ayudar.
de antemano gracias por sus respuestas y si quieres te mando el bug un poco mas explicado a tu correo.

    Eduardo dice:

    Me encantaría ver un ejemplo de eso, o por lo menos que me digas cual es el tag del trigger.

    Si puedes mándame mas información a mi correo, desde la sección Contactanos de esta página.

    Gracias.

    ¿Este comentario te ha servido? y colabora con el blog
    Responder
      dhamasito dice:

      que tal eduardo, ya pude resolver lo del problema que tenia con el tooltip:
      el problema era que no limpiaba el div contenedor y cada ves que se producia una respuesta del server con xajax pues se creaba un nuevo tooltip.
      al final si a alguien le sirve hise algo como esto:
      $objResponse->assign(”$id_div”,”innerHTML”,”");

      un saludote desde mexico y hasta luego.

John dice:

Excelente, deberías pensarte en un pluging para Wordpress, es más yo ando buscando implementar algo así en uno de mis sitios. si te interesa avisame y miramos que podemos hacer.

gerardo dice:

como debe aplicarse en un form

gerardo dice:

tengo un problema resulta que cuando el input esta cerca del borde del documento en este caso del borde top el tooltip hace su trabajo re-posicionandose pero resulta que me bloquea los campos del form que se puede hace al respecto

saludos

Ricardo Lopes dice:

Holla,
Como yo uso con uno link?
Gracias

    Ricardo Lopes dice:

    I got it… Mouseover ! Gracias

    Otra pregunta:
    ¿Dónde puedo configurar mode: ‘tl’: No sexy-tooltips.v1.1.jquery o javascript de la página,
    $ ( ‘# A1′). Tooltip …? Quiero la descripción arriba ya la izquierda, pero esta abarro. Gracias … Pronto voy a enviar el café:)

man dice:

eduardo, hay forma de cargar la información que se mostrará via ajax?

felicitaciones por tu trabajo, un saludo