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
Carlos says:

Como hacer que sexy tool tips funcione con explorer 9?
Con Firefox funciona de maravilla, Pero no con explorer 9

Shen says:

Hola!
Me encanta utilizar este plugin y como queda implementado en la pagina web, un gran trabajo.
Pero tengo una duda, he implementado el Tooltip para que aparezca a la hora de pinchas en unas imágenes, pero me gustaría que, si existe algún otro Tooltip desplegado se ocultaran y solo quedara el ultimo que has abierto. He probado de mil formas pero no lo consigo.
Alguna ayuda por favor?
Un saludo.

Angel says:

Cuando aparece el tooltip, me deshabilita los demás links que tengo.

空包网 says:

文章和内容都写得很好呀 空包代发 ! 空包网 http://www.kongbao163.com