Sweet Titles: Bonitos Tooltips semi transparente para nuestros enlaces

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”. Ver Demo
Instalación:

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

PLAIN TEXT

JavaScript:

1. <script type=“text/javascript” src=“js/addEvent.js”></script>

2. <script type=“text/javascript” src=“js/sweetTitles.js”></script>

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

PLAIN TEXT

CSS:

1. /* Fading Tooltips */

2. div#toolTip {

3. position:absolute;

4. width:220px;

5. background:#000;

6. border:2px double #fff;

7. text-align:left;

8. padding:5px;

9. -moz-border-radius:5px;

10. z-index:1000;

11. }

12. div#toolTip p {

13. margin:0;

14. padding:0;

15. color:#fff;

16. font:11px/12px verdana,arial,serif;

17. }

18. div#toolTip p em {

19. display:block;

20. margin-top:3px;

21. color:#f60;

22. font-style:normal;

23. font-weight:bold;

24. }

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)

PLAIN TEXT

HTML:

1. <a href=“http://www.xyberneticos.com/personalizar-nuestro-contador”

2. title=“plugin wordpress que nos permitirá seguir la cantidad de usuarios suscriptos mediante un contador personalizado mediante CSS.” />Personalizar nuestro contador de suscripciones para lograr un estilo agradable </a>

Ver demo Online – Web Oficial dustindiaz

~ por inotony en Octubre 30, 2007.