Tool Tips con Mootools 1.2

agosto 25, 2008

Actualizado… ahora con ejemplos aqui.

Hola a todos hoy vamos a tratar el tema de los ToolTips que han tenido algunos cambios en mootools 1.2

Básicamente un tooltip es una pequeña ayuda que le presentamos al usuario en la que le informamos de alguna acción o información adicional en un objeto.

Para usar ToolTips necesitamos la librería Core de mootools 1.2 y la librería more con el plugin TIPS. que podemos descargar aqui.

image

Ahora incluiremos estas librerías en nuestra página dentro de la etiqueta <HEAD>. Recuerde que el orden es importante ya more depende de core.

<!– mootools 1.2 –>
<script type=”text/javascript” src=”js/mootools12core.js”></script>

<script type=”text/javascript” src=”js/mootools12more.js”></script>
<!– Fin mootools 1.2 –>

Ahora dentro del evento domready debemos inicializar el objeto Tips de mootools.

window.addEvent(‘domready’,function()
{
var Tips1 = new Tips(‘.Tips1’,{
showDelay: 400,
hideDelay: 400,
fixed:true
});
Tips1.addEvent(‘onShow’, function(tip){
tip.fade(‘in’);
});
Tips1.addEvent(‘onHide’, function(tip){
tip.fade(‘out’);
});

$(‘lnk’).store(‘tip:title’, ‘Titulo del ToolTip’);
$(‘lnk’).store(‘tip:text’, ‘Texto del ToolTip’);

});

La definición se compone básicamente en:

var Tips1 = new Tips(‘<nombre de la clase css>’,{<opciones separadas por comas>});

En el caso del ejemplo he puesto como clase css ‘.Tips1’ y como opciones:

showDelay:400 <- muestra el tooltip despues de 400ms de que el mouse este sobre el.

hideDelay:400 <- oculta el tooltipo 400ms despues de que el mouse no este sobte el.

fixed:true <- indica si el tooltip se mueve con el puntero del mouse o es estatico en donde aparece. Por defecto el valor es False.

Los dos metodos siguentes adicionan eventos al objeto ToolTip. estos eventos son:

onShow : Hace un fade in cuando se inicia el tooltip.

onHide : hace un fade out cuando se cierra el tooltip

.Luego las lineas

$(‘lnk’).store(‘tip:title’, ‘Titulo del ToolTip’);
$(‘lnk’).store(‘tip:text’, ‘Texto del ToolTip’);

definen lo que debe mostrarse en el tooltip, es decir el Titulo y el Texto. el Objeto al que le asignamos la propiedad es el objeto en el que debe aparecer el tooltip. En este caso he creado un link

<a href=”#” id=”lnk” class=”Tips1″>mostrar</a>

El link debe tener como clase css la que definimos al momento de crear el objeto Tips de mootools.

Otra forma de mostrar contenido en el tooltipo es usando el atributo title del link. en este caso sobraría la definición que hacemos arriba con el metodo store(). y quedaria algo asi:

<a href=”#” id=”lnk” title=”link de prueba” class=”Tips1″>mostrar</a>

Definición de Estilos para el ToolTip

La estructura que crea mootools para pintar el tooltip es la siguente:

<div class=”options.className”> //the className you pass in options will be assigned here.
<div class=”tip-top”></div> //useful for styling
<div class=”tip”>
<div class=”tip-title”></div>
<div class=”tip-text”></div>
</div>
<div class=”tip-bottom”></div> //useful for styling
</div>

Entonces de aqui nos basamos para crear la hoja de estilos que definirá el estilo del tooltip.

en definitiva las clases css importantes son:

  • tip-top
  • tip
  • tip-title
  • tip-text
  • tip-bottom

Aqui un ejemplo usando unicamente tip, tip-title y tip-text

.tip {
Z-INDEX: 13000; WIDTH: 130px; COLOR: #000
}
.tip-title {
PADDING-RIGHT: 8px; PADDING-LEFT: 8px; FONT-WEIGHT: bold; FONT-SIZE: 11px; BACKGROUND: #c3df7d; PADDING-BOTTOM: 4px; MARGIN: 0px; COLOR: #3e4f14; PADDING-TOP: 8px; BORDER-BOTTOM: #b5cf74 1px solid
}
.tip-text {
PADDING-RIGHT: 8px; PADDING-LEFT: 8px; FONT-SIZE: 11px; BACKGROUND: #cfdfa7; PADDING-BOTTOM: 8px; PADDING-TOP: 4px
}

Listo, ahora nuestro tooltip funciona. puedes ensayar con nuevos efectos de transición y con hojas de estilo mas elaboradas y obtendrás excelentes resultados.

Actualizado… ahora con ejemplos aqui.

Anuncios

4 Responses to “Tool Tips con Mootools 1.2”

  1. shakaran Says:

    Muy buen artículo, me ha encantado la manera didáctica con la que lo has mostrado, aunque hubiese estado bien, poner un ejemplo en marcha para facilitar mejor su comprensión y no esperar a montarlo para verlo.

    Es muy útil utilizar Mootools para hacer los tooltips de una forma eficiente y sencilla.

    Saludos

  2. D Says:

    hola shakaran, gracias por tu comentario y me alegra mucho que te haya gustado el articulo. tendre en cuenta tu sugerencia, estoy buscando un sitio para ir publicando los ejemplos.

  3. sonicrafter Says:

    Wonderful work buddy, continue the good work.

  4. elchaval Says:

    has puesto ya para descargar algun ejemplo funcionando en algun sitio? esta de p.m., tio, te felicito…


Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: