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

Hoy voy a hablar sobre 2 cosas en este post, primero y es el tema principal es sobre el framework css llamado Blueprint y el segundo tema es Windows Live Writer.

Bueno y porque Windows Live Writer? pues porque acabo de instalarlo y voy a escribir este post usándolo para hacer una prueba de sus funciones, luego escribiré mas a fondo sobre el tema del windows live writer.

Blueprint es un set de archivos CSS que trae ya definidos muchos formatos útiles y que  nos facilitan la creación de nuestros sitios. Es 100% web 2.0, trabaja con DIV y permite definir desde una página con una sola columna, hasta páginas con diseños complejos casi tan fácil como usar una grilla gráfica para ubicar nuestros objetos.

Hay que reconocer que de primera mano no es tan rápido el desarrollo usando este framework ya que tenemos primero que aprender como usarlo y cual es la mejor forma de poner los objetos, pero estoy seguro que después de coger el paso ya será muy fácil crear rápidamente un sitio con una distribución compleja y sin tanta preocupación por el css y los tipos de letra entre otros.

aquí hay un ejemplo de lo que puede hacerse con solo Blueprint

http://files.bjorkoy.com/blueprint/tests/parts/sample.html

Actualmente está en la versión 0.7, la cual podemos descargar desde Google Code BluePrintCss.

El archivo descarga varias cosas incluido el código fuente pero básicamente solo necesitaremos incluir 3 archivos css:

print.css Este archivo tiene los estilos necesarios para usarlos al momento de imprimir contenido

screen.css : Este es el archivo principal con todos los estilos necesarios.

ie.css : Un archivo para suplir algunas de las cosas diferentes que tiene Internet Explorer.

Ahora incluimos los css dentro de nuestra pagina con las etiquetas link.

<!– Framework CSS –>
<link rel=”stylesheet” href=”../blueprint/screen.css” type=”text/css” media=”screen, projection”>
<link rel=”stylesheet” href=”../blueprint/print.css” type=”text/css” media=”print”>
<!–[if IE]><link rel=”stylesheet” href=”../../blueprint/ie.css” type=”text/css” media=”screen, projection”><![endif]–>

Y comenzamos a utilizarlo.

Como vemos en las etiquetas definimos cada uno de los usos que se le dará a los archivos, por ejemplo para el archivo screen.css definimos que se usara para proyecciones y pantalla, luego definimos el que se usará para impresión y adicionalmente con una etiqueta condicional definimos que si es un Internet Explorer entonces usamos el archivo ie.css.

Lo primero es incluir un DIV que servirá de contenedor para todo el sitio, este div contendrá los demás elementos de la página y se encargará de dar el tamaño y centrar el contenido.

<div class=”container”>

En donde el estilo que usamos es “container” el cual define el tamaño a 960px centrado.

Ahora voy a crear el encabezado de la página en donde pondré el titulo del sitio. utilizo un estilo “span-24” que llenará de lado a lado de la pantalla.

<div class=”span-24″>
<h1>Este es el header</h1>
</div>

Defino una columna de contenido principal, con “column span-12 colborder first “ que básicamente le decimos que es una columna que es la primera y que tiene un borde al lado derecho.

<div class=”column span-12 colborder first “>
<h2>Contenido Principal</h2>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et</p>
</div>

Ahora agrego dos columnas mas que por el span-7 y el span-3 son mas pequeñas en ancho que la de contenido.

<div class=”column span-7 “>
<h3>Segunda Columna</h3>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ornare mattis nunc. Mauris venenatis, pede sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue</p>

</div>

<div class=”column span-3 last”>
<h3>Tercera Columna</h3>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ornare mattis nunc. Mauris venenatis, pede sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue</p>
</div>

y por ultimo adiciono el Pie de Página, lo separo con un HR para hacer una línea.

<hr>

<div class=”span-24″>
<h4>Este es el Footer</h4>
</div>

y ya tengo el esqueleto de mi sitio, solo me restaría terminar de adicionar las imágenes y el contenido que defina mi diseño pero el esqueleto esta listo.

Bueno, esta muy básico, pero solo quería contarles lo sencillo que es, ya igual trae muchas otras cosas que quizás trataremos después o puedes leer en los tutoriales, ejemplos o con la experiencia propia, es mas si quieres publicar un tutorial mas avanzado te invito a que me lo envíes y yo lo publico aquí como un post a tu nombre.

yo recomiendo este tutorial de Leonardo Donofrio el cual explica las cosas básicas y en español, aunque hay que tener en cuenta que este tutorial usa una versión anterior de blueprint así que no van a coincidir las medidas de los elementos.

yo lo que hice fue usar el tutorial para entender como usarlo pero luego abrí el archivo screen.css y comencé a ver cuales son las medidas de cada uno de los atributos para saber cual usar.

más tutoriales y artículos sobre el tema en:

http://code.google.com/p/blueprintcss/wiki/Links