Otra de las grandes funcionalidades que nos permite crear ALLOY es la de generar tooltips de una manera inmediata y sencilla. Nos permite configurarlo de un sin fin de maneras pero las principales son que nos deja establecer donde queremos ubircarlo respecto al contenido del que sale, tanto la posición del bocadillo como la dirección de la flecha.
Podemos ver una imagen del resultado en la siguiente imagen:
Vamos a ver un ejemplo de cómo podemos hacer un tooltip sencillo y luego os explicaré para que sirven algunos de los parámetros principales que se pueden usar.
AUI().ready('aui-tooltip', function(A) {
var instance = new A.Tooltip({
trigger: '#element',
align: { points: [ 'bc', 'tc' ] },/*posicion de la flecha, posicion del tooltip*/
bodyContent: 'Simple tooltip'
}).render();
});
Con el código anterior generaríamos un tooltip sobre el elemento con id="#element" cuyo contenido sería "Simple tooltip". Este aparecería justo por encima y centrado(tc) del bloque con ese ID y , además, su flecha se colocaría apuntando hacia abajo y centrada (bc) .
A continuación vamos a ver los diferentes parámetros a configurar:
trigger: El selector del elemento que activa la aparición del tooltip.
align: Esta es la posición tanto del tooltip como de la flecha. Podemos pasarle un nodo o unos puntos. En el caso de los puntos su formato es el que vemos en el ejemplo y las letras hacen referencia a c=center l=left r=right t=top b=bottom. El primer punto corresponde a la flecha y el segundo al tooltip. Por defecto estos puntos son [bl,tr] .
bodyContent: Este es el contenido del tooltip. Puede ser un simple string con texto plano, código, imagenes, videos,etc... lo que nosotros queramos.
anim: La apertura o cierre del tooltip se hace mediante una animación. Su formato es el siguiente:
anim: {
show: {
duration: .9
},
hide: {
duration: .2
}
}
hideDelay: El tiempo en milisegundos que tarda el un tooltip en cerrarse tras la invocación el evento que lo cierra. Necesita un dato númerico. Por defecto es 500ms.
showOn: Establece el evento que es responsable de que el tooltip se muestre. Necesita un string con el nombre del evento. Por defecto es 'mouseover' .
hideOn: Establece el evento que es responsable del cierre del tooltip. Necesita un string con el nombre del evento. Por defecto es 'mouseout' .
title: Utiliza el contenido del atributo title como contenido del tooltip en caso de estar a true. Admite valores true o false.
id: Asigna un id al tooltip. Necesita un string.
cssClass: Asigna un class al tooltip. Necesita un string.
showArrow: Muestra la flecha que acompaña al tooltip. Admite valores true o false.
Podeis ver la documentación completa de este plugin en el siguiente enlace donde encontrareis todas las posibilidades en cuanto a configuración.
Espero que os sirva.