BeautyTitle: Tooltips para enlaces con atributo title usando Mootools
4 de Septiembre 2008
BeautyTitle es un pequeño script para mostrar el atributo title de los enlaces de una forma más atractiva visualmente que la que por defecto nos muestra el navegador.
Usa la librería Mootools y su presentación, salvo familia tipográfica, son configurables.
El tooltip se posiciona hacia la izquierda, derecha, arriba o abajo dependiendo de su posición respecto al área visible de la ventana del navegador. Tanto el grado de opacidad, como color de fondo, color del texto del título y de la url se pueden personalizar. Las esquinas redondeadas son opcionales y sólo visibles en navegadores basados en Gecko y Webkit, ya que se usan las propiedades -moz-border-radius y -webkit-border-radius. Por defecto aparece sin esquinas redondeadas.
Lo he probado en Internet Explorer 6, 7 y 8 beta, Firefox 2 y 3, Safari/Win, Google Chrome, Konkeror, Midori, Epiphany y Firefox 3 en Ubuntu. En todos estos navegadores funciona corréctamente. En Opera no funciona muy bien.
Es el primer script que me atrevo a ofrecer al “mundo”. Si quieres usarlo bajo tu propio riesgo y cuenta, lo puedes descargar desde aquí: Descarga BeautyTitle. (Esta es la segunda versión con alguna mejora y fallos corregidos)
Archivos necesarios:
- Librería Mootools 1.2.0 (mootools-1.2-core-yc.js)
- Javascript BeautyTitle (beautytitle.js)
- Javascript configuración (customize-beautytitle.js):
Para usar los valores por defecto:
var instTooltip = new Tooltip();Estos valores son:
selector: a[title] -> Cualquier enlace que tenga atributo title
mostrarUrl: true –> Opción de mostrar la url del enlace
estilos: {
colorFondo: ‘#000′,
opacidad: 0.8,
colorTexto: ‘#fff’,
padding: ‘5px’,
colorUrl: ‘#FC2797′,
radioEsquinas: null
}
Demo BeautyTooltip con valores por defecto
Propiedades personalizables
También se ha cambiado respecto a la anterior versión, la forma de definir las propiedades personalizables del tooltip. En esta, se definen cambiando los valores correspondientes en el archivo customize-beautytitle.js, o como se muestra en algunos de los ejemplos, en la etiqueta <head> de la página dentro de la correspondiente etiqueta <script> (menos recomendable si queremos tener todo separado, como Dios manda)
Ejemplo:
var instTooltip = new Tooltip({
selector: 'a[title]',
mostrarUrl: true,
estilos: {
colorFondo: '#000',
opacidad: 0.8,
colorTexto: '#fff',
padding: '5px',
colorUrl: '#FC2797',
radioEsquinas: '5px'
}
});
La familia tipográfica, interlineado, etc., se heredan de los estilos generales de la página en la que se use. El elemento <span> que contiene el tooltip utiliza las clases ‘.tt’ y ‘.url’ para un mayor control del estilo si se requiere.
Más demos:
- Esquinas redondeadas (Gecko y Webkit) sin mostrar url.
- Blanco sobre página con fondo oscuro sin mostrar url.
Actualización 21/09/2008:
También hay que saber -algo que yo no sabía cuando hice este script- que Mootools ya dispone de un plugin para crear tooltips que se puede descargar desde Mootools 1.2 More Builder y con el que crear nuevos tooltips se convierte en algo tan sencillo como esto:
window.addEvent('domready', inicioTips);
function inicioTips(){
var links = $$('a[title]');
var tooltips = new Tips(links, {
showDelay: 50,
hideDelay: 100,
className: 'tooltip',
onShow: function(toolTipElement){
toolTipElement.set({
styles: {
opacity: 0.7,
'-moz-border-radius': '3px',
'-webkit-border-radius': '3px'
}
})
}
})
}
El código es sólo un ejemplo de uso. Se pueden ver más ejemplos y descargar el código de ejemplo en 30 Days of Mootools 1.2 Tutorials - Day 19 - Tooltips
Sobre esta entrada
Archivado en Sin categoría
