Borchani.COM – Blog

BoxOver un sencillo script que utiliza Javascript/DHTML para permitirnos mostrar tooltips en una web. El tooltips básicamente es agregar información extra en algún div o texto, que se mostrara cuando pasemos el Mouse sobre ese elemento.

Descargamos el script tooltips de BoxOver.

Incluimos en nuestra cabecera entre las etiquetas < head > y < / head > la llamada.

NOTA: Verificamos bien en “src” que la localización del script boxOver.js sea la correcta.

Ahora veamos ejemplos prácticos de como implementarlos a nuestros elementos.

Div Normal

Por ejemplo, si tenemos un “div” en nuestro documento.

Div con tooltips

Para hacer que un tooltip aparezca en nuestros elemento alteramos el código, agregando nuevos atributos: “title”, “header” ,“body”: como aquí:

Enlace normal

Enlace con tooltips

El padre de Freelance Switch, Collis Ta’eed, acaba de añadir VECTORTUTS a su línea de calidad de sitios web, uniéndose a PSDTUTS, NETTUTS, FaveUp, Flashden, AudioJungle y, por supuesto, Freelance Switch.

VECTORTUTS estará destinado a aquellos que suelan trabajar con Adobe Illustrator y suelan buscar nuevos trucos para sus trabajos, nuevas ideas, mejorar gracias a los tutoriales que evidentemente se publicaran, encontrar recursos realmente útiles cuando de vectores se trate, etc. En fin, VECTORTUTS es un sitio para agregar a sus feed definitivamente.

Enlace VECTORTUTS

Sweet Titles es un script que nos permite generar en nuestros enlaces tooltips. Los tooltips si aun no sabes son esos mensajes emergentes que vemos al poner nuestro cursor sobre un enlace determinado. En este caso los mostraremos en una caja emergente semi transparente muy agradable y que podemos personalizar a nuestros gustos mediante css.

De forma default una vez instalado el script nos mostrara automáticamente las url de los enlaces, ahora, si deseamos agregar una información extra al tooltips , simplemente lo haremos por medio del atributo “Title”.

Instalación:

• Descargamos el script Sweet Titles
• Incluimos en nuestra cabecera entre las etiquetas < head > y < / head > la llamada.

NOTA: Verificamos bien en “src” que la localización de loa script sea la correcta. ///

En nuestra hoja de estilo agregamos:

Usos:

Si tenemos instalado el script en realidad no necesitaremos hacer nada más en caso de que solo deseemos mostrar las url en los tooltips.

Ahora si a estos tooltips deseamos agregarle una información adicional, (como las letras blancas que vemos en el ejemplo), lo haremos mediante el atributo “Title” seguido de lo que deseamos mostrar. Ejemplo (siguiendo con la imagen del post)

Web Oficial dustindiaz