JMiur [E]

UniTip es otro de esos scripts para mostrar tooltips al pasar el puntero del ratón sobre deteminados enlaces.

Es muy liviana y utiliza CSS para crear un fondo con imágenes así que es bastante sencillo reemplazarlas por imágenes personales sin necesidad de modificar códigos (las que trae por defecto son aptas para sitios con fondos claros):





En principio, funciona bien en cualquier navegador y podemos descargala desde este ZIP . Allí encontraremos el archivo unitip.js que es el único necesario y que podemos alojar en un servidor externo y luego insertarlo antes de </head> de este modo:
<script type="text/javascript" src="URL_unitip.js"></script>
O bien abrirlo con el block de notas y luego, copiar y pegar su contenido también antes de </head> pero, de este modo:
<script type='text/javascript'>
//<![CDATA[

... aqui pegamos el contenido del archivo ...

//]]>
</script>
Lo que nos faltaria es el CSS que es mejor agregarlo a nuestra plantilla inmediatamente después del script:
<style type='text/css'>
#unitip {
display: none;
position: absolute;
top: -1000px;
z-index: 1000;
/* podemos establece la fuente y el color de los textos */
color: #234;
font-family: Tahoma;
font-size: 11px;
}
#unitippoint, #unitipmid, #unitipcap {
display: block;
left: 0px;
position: relative;
top: 0px;
width: 145px;
}
#unitippoint {
background: url(URL_tippoint.png) no-repeat;
height: 19px;
overflow: hidden;
}
#unitipmid {
background: url(URL_tipmid.png) repeat;
height: auto;
padding: 5px 15px;
width: 115px;
}
#unitipcap {
background: url(URL_tipcap.png) no-repeat;
height: 7px;
overflow: hidden;
}
</style>
Ese modelo corresponde al ejemplo para fondos claros y las imágenes ya están alojadas en ImageShack. Basta editarlas, realojarlas y cambiar las URLs para utilizar otras.

El mismo script es configurable. Así, por defecto, se puede aplicar a cualquier etiqueta de enlace (A) o imagen (IMG) pero, podemos editar el script y cambiar eso. El original dice así:
var uniTipTag = "a,img"; //Which tag do you want to uniTip-ize? Keep it lowercase. No spaces around commas.//
y podríamos agregar otras etiquetas de este modo:
var uniTipTag = "a,img,p,span";
Lo mismo ocurre con la posición relativa donde se mostrará el tooltip:
var uniTipX = 0; // X offset from cursor//
var uniTipY = 15; // Y offset from cursor//
Lo aplicamos a una etiqueta indicando una clase especial class="tip" y colocamos lo que queremos mostrar, en el atributo title. Por ejemplo:
<a class="tip" title="Lo que veremos en el tooltip" href="una_URL"> ENLACE </a> 
El nombre de la clase, también puede cambiarse, editando el script:
var uniTipClass = "tip";
También es posible crear contenido que contenga HTML. Para eso, lo más probable es que debamos cambiar los caracteres de apertura y cierre de las etiquetas por sus correspondientes entities. Es decir, en lugar de < escribimos &lt; y en lugar de > escribimos &gt;. Por ejemplo:
<a class="tip" title="la primera línea del tooltip ...&lt;br/&gt;y la segunda línea del tooltip ..." href="una_URL"> ENLACE </a> 
Un ejemplo concreto es el que puede verse en los diferentes enlaces de esta entrada.

20 comentarios:

Ciberwing  

Genial. Gracias

Responder
[M]aCrO  

man, tengo varias dudas espero que me puedas responder:

necesito que cuando alguien ingrese al blog se le abran muchas ventanas (pop up)
automaticas

con este comando funca
window.open('http://www.tuweb.com', 'geoflotante', '');
no se como abrir varias probe con for

pero no se si mi sintaxis es correcta. desde ya muchas gracias

Responder
JMiur  

Pueden abrirse de manera individual:
window.open('http://XXX.com', 'geoflotante1', '');
window.open('http://YYY.com', 'geoflotante2', '');
window.open('http://ZZZ.com', 'geoflotante3', '');
con un blucle FOR deberían estar previamente en un array.

Desde ya, nada de eso es recomendable en absoluto. Los usuarios ODIAMOS las ventanas pop-up y por lo general, cualquier navegador bien configurado no las muestra.

Responder
[M]aCrO  

si si era solo curiosidad.
JMiur Una pregunta, donde aprendiste tanto de estos lenguajes de programacion, si sabes de algun libro/sitio avisame, muchas gracias.

sabes como desconfigurar el navegador para que lo acepte ?

Responder
J&J  

me olvidaba man muchas gracias por el code funciona de maravilla :D

Responder
LuzdeLuna  

Otra tentación!!! no se en qué la voy aplicar pero me la llevo :P a favoritos.
Un abrazo

Responder
JMiur  

[M]aCrO: No aprendí en ninguna aprte en especial, lo poco que sé lo fui curioseando aquí y allá. Con respesto a los navegadores, el tuyo puedes configurarlo y hacer que admita pop-ups pero no puedes hacer lo mismo con los navegadores de las personas que visitarán tu sitio. Por eso es recomendable ser prudente en esas cosas porque es una forma de ahuyentar a las visitas.

Me alegro J&J :)

LuzdeLuna: Esta es facil, no vas a tener problemas de usarla :D

Responder
Vku  

¿como haces para que muestre el contenido centrado?

Responder
Naruto de las 9 colas  

Neccesito ayuda me descargue una plantilla para blogger y no se como subirla ayudaaa

Responder
JMiur  

Vku: No hice nada. así aparece por defecto. Cualquier cosa, agregalo a:
#unitipmid {
....
text-align:center;
}

Naruto: Depende lo que hayas descargado. Desde donde lo has hecho, seguramente están las explicaciones, Lo que debes encontrar es una rchiv XML que es el que deberá subir desde la pestaña Diseño | Edición HTML.

Responder
Vku  

asi quedo en el medio.
gracias.
ojo que te desaparecio la imagen de abajo

Responder
JMiur  

Moraleja: Nunca confies en ImageShack :D Ya están restauradas.

Responder
CHiCken  

o gracias, me sirvio mucho :) ya tenia rato queriendo poner el tooltip nomas qe siempre me marcaaba un error y nunca lo pude resolver y ahora como que este es diferente a los demas y me ya esta en mi blog :)

Responder
nEjO  

BUEN TRUCO PERO NO LOGRO QUE EN EL TOOLTIS ME SALGA UNA IMGAEN EN SU LUGAR ME SALE UN CUADRITO QUE SIEMPRE SALE CUANDO NO SE CARGA LA IMAGEN O ALGO ASI... AQUI UNA PEQUEÑA CAPTURA DE PANTALLA: http://dl.dropbox.com/u/11548740/EMOTI/TOOL.bmp NO SE QUE SUCEDA.. ME PODRIAS PONER COMO DEBO HACERLO OSEA PONEME UN EJEMPLO DEL CODIGO... ESQUE QUIERA QUE ME SALIERA COMO CAUNDO EN ESTA ENTRADA PONGO EL PUNTERO ENCIMA SOBRE LA PALABRA "ZIP" Y ME SALE EL TOOL TIP CON "ESTE ES UN ZIP Y EL DIBUJITO" PORFAAAA

Responder
JMiur  

Si lo que ves es eso, es que la imagen es inaccesible por alguna razón; deberías revisar la URL de esa imagen y ver si es correcta.

Responder
Víctor González  

Hola JMiur, espero te encuentres bien...

Quiero aplicar esto del tooltips en los enlaces que llevan a los comentarios de los post, pero no me sale... ¿cómo lo haría?

Responder
JMiur  

Nos era nada sencillo porque esos enlaces están en la plantilla y traducir el código de tal modo que Blogegr lo entienda, será muy pero muy engorroso porque deben cambiarse comillas y otros caracteres especiales que están prohibidos.

Responder
Indeziisoow  

No me funciona el efecto.

JMiur  

Deberías mostrar tu ejempo para responder algo. De todos modso, en tu blog hay un error en un script; el código fuente meustra esto:

<script>//<![CDATA[(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;

y debería decir esto:

<script>
//<![CDATA[
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;

caso contrario, al función no existe porque queda comentada y el navegador responde con:
SyntaxError: return not in function

Indeziisoow  

Ok, revisaré de nuevo. Tal vez algo que hice mal al momento de poner el tooltip o es ese script que dices. Gracias por responder.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR