Sweet Titles: Bonitos Tooltips semi transparente para nuestros enlaces

Publicado por Nikko el dia 31 Aug 2007 - Guardado en 249 Views Javascript, Scripts 249 Views

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:

<script type="text/javascript" src="js/addEvent.js"></script>
<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:

/* Fading Tooltips */
div#toolTip {
position:absolute;
width:220px;
background:#000;
border:2px double #fff;
text-align:left;
padding:5px;
-moz-border-radius:5px;
z-index:1000;
}
div#toolTip p {
margin:0;
padding:0;
color:#fff;
font:11px/12px verdana,arial,serif;
}
div#toolTip p em {
display:block;
margin-top:3px;
color:#f60;
font-style:normal;
font-weight:bold;
}

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:

<a href="http://www.xyberneticos.com/personalizar-nuestro-contador"
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

delicious, digg, barrapunto, meneame, digg , technorati , stumble it!

Rosella

31 - 08 - 2007


Excelente tip Nikko!Muchas gracias.
Por cierto te he dejado en tu buzon de gmail un correo y no me has respondido ni nada espero que no haya ido a parar al spam...
Saluditos
Sweet Titles, tooltips semi transparente para los enlaces « Cosas sencillas

31 - 08 - 2007


[...] Titles, tooltips semi transparente para los enlaces En XYBERNETICOS nos muestran a Sweet Titles es un script que nos permite generar en nuestros enlaces tooltips. Los [...]
jose

31 - 08 - 2007


Hola,

este trukillo está muy chulo. Yo quería saber si se puede hacer que esté activo solo en algunos casos o una vez que lo pones sale el tooltip para todos los links...

Muchas gracias
hernan

31 - 08 - 2007


Te hago una consulta para eliminar la url al final del tooltip como tengo que hacer?

gracias y muy buena la pagina!
javier

31 - 08 - 2007


este tooltip es sólo para ser usado en enlaces? o pueod tb usarlo si se hace mouseover en un cuadro de texto por ejemplo?
alvaro

31 - 08 - 2007


Muy bueno tu tooltip pero como le hago para que no salga en todos los link, que le debo mover para que no me salga en todos los links :S ayuda!!!!!
Abraham

31 - 08 - 2007


Para los que no han podido quitar la URL del tooltip, basta con cambiar:

div#toolTip p em {
display: block;
margin-top:3px;
color:#f60;
font-style:normal;
font-weight:bold;
}

Por:

div#toolTip p em {
display: none;
}

Y lo que hacen es ocultarl el em, que es la parte que trae la URL.

Otra idea que tengo, es que se podría cambiando esta linea del js:

this.tip.innerHTML = ""+anch.getAttribute('tip')+""+access+addy+"";

Por algo asi:

this.tip.innerHTML = ""+anch.getAttribute('tip')+"";

Y asi no se genera el que es lo que trae la URL...

Espero haber sido de ayuda jeje
Abraham

31 - 08 - 2007


He probado lo último y resultó verdad... ahora ya quedó así:

this.tip.innerHTML = ""+anch.getAttribute('tip')+"";
if ( parseInt(document.documentElement.clientWidth+document.documentElement.scrollLeft) la_url y, dado que ya no esta, pues entonces tambien podemos quitar el CSS del em porque ya no lo vamos a usar
ACAXAO

31 - 08 - 2007


E R R O R
Hola, estaba probando este tooltip, en firefox me jala muy bien, pero en Microsoft Internet Explorer si bajo la ventana el tooltip ya no se ve porque aparece muy arriba, así que encontré como solucionarlo, en el archivo js “sweetTitles”( que descargamos en esta pagina ), tiene el código para leer la posición del Mouse, lo tiene de la siguiente manera:

if ( document.captureEvents ) {
sweetTitles.xCord = e.pageX;
sweetTitles.yCord = e.pageY;
} else if ( window.event.clientX ) {
sweetTitles.xCord = window.event.clientX+document.documentElement.scrollLeft;
sweetTitles.yCord = window.event.clientY+document.documentElement.scrollTop;
}

Todo eso lo sustituí por:

/*ie la ocupamos para saber si estamos en Microsoft Internet Explore o en otro navegador:*/
var ie = document.all ? true : false;
/*Si estamos en Microsoft Internet Explore, se lee la posición del Mouse de la siguiente forma:*/
if (ie){
sweetTitles.xCord = event.clientX+document.body.scrollLeft;
sweetTitles.yCord = event.clientY+document.body.scrollTop;
}
/*en otros exploradores es */
else{
sweetTitles.xCord = e.pageX;
sweetTitles.yCord = e.pageY;
}

Y ya jala en Microsoft Internet Explorer, gracias por poner estos minitutos, espero que esto le sea útil a alguien mas, gracias

Xyberneticos

Sweet Titles: Bonitos Tooltips semi transparente para nuestros enlaces