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.

Demo

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

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é

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