JMiur [E]

Fading JavaScript Tooltips es un pequeño script que permite crear esos pequeños cuadros de textos informativos que se ven cuando colocamos el puntero del ratón sobre un enlace (tooltips). Su característica principal es que es muy lviana y no depende de otras librerías así que puede usarse en cualquier página web.

Una vez que descargamos el ZIP veremos una serie de archivos incluyendo el demo. De todos ellos, el único necesario es script.js que podemos alojar en un servidor o bien agregarlo de manera directa en la plantilla con una única condición, DEBE estar al final de nuestra página así que lo colocamos antes de </body>:
<script type='text/javascript' src='URL_script.js'></script>
o bien:
<script type='text/javascript'>
//<![CDATA[
aqui copiamos y pegamos el contenido del archivo
//]]>
</script>
¿Cómo lo vamos a usar? Indicando los textos que queremos que sirvan como "lanzadores" mediante etiquetas SPAN:
<span class="hotspot" onmouseover="tooltip.show('lo que queremos mostrar');" onmouseout="tooltip.hide();"> un texto </span>
Es decir, colocamos en tooltip.show() una cadena de texto de cualquier tipo que, puede incluir código HTML aunque para esto, deberemos cambiar los caracteres prohibidos:

en lugar de < escribimos &lt;
en lugar de > escribimos &gt;

por ejemplo:
<span class="hotspot" onmouseover="tooltip.show('Blablabla &lt;b&gt;negrita&lt;/b&gt; blablaba');" onmouseout="tooltip.hide();"> un texto </span>
y no sólo es texto lo que puede colocarse, también s posible usar una imagen; por ejemplo:
<span class="hotspot" onmouseover="tooltip.show('&lt;img src=\'URL_imagen\'/&gt;');" onmouseout="tooltip.hide();"> un texto </span>
Para este tipo de cosas, donde el HTML a colocar es complejo, sólo debemos prestar atención a las comillas e indicarle al navegador que ciertos caracteres deben tomarse de manera literal, para eso, les anteponemos una barra invertida:
'&lt;img src=\'URL_imagen\'/&gt;'
Las comillas de incio y fin son parte del código y las internas son literales.

Lo que faltaría agregar es el CSS que es fundamental para que esto funcione. Lo agregamos antes de </b:skin>. Aunque hay un archivo llamado style.css en el demo que puede usarse de base, podemos cambiarlo. Por ejemplo, en el demo, se usan tres imágenes para darle forma redondeada al tooltip (tt_left.gif, tt_top.gif, tt_bottom.gif) si quieren usarse, deben ser alojadas en algún sitio y cambiar las URLs.

En estos ejemplos no estoy usando imágenes así que el estilo se reduce a dos definiciones:
.hotspot { /* es el texto que sirve de lanzador */
color: #94D5FD;
cursor: pointer;
font-weight: bold;
font-family: tahoma;
font-size: 13px;
}

#tt { /* es el contenido del tooltip y el único obligatorio */
background: CornflowerBlue;
color: #FFF;
display: block;
font-family: Arial;
font-size: 16px;
padding: 5px 10px;
position: absolute;
-moz-border-radius: 10px;
}

/* los otros tres bloques son opativos y tiene sentido usarlos sólo si le colocamos un fondo con imágenes */
#tttop { /* la parte superior */ }
#ttcont { /* la parte central */ }
#ttbot { /* la parte inferior */ }

Ut tincidunt nisi quis elit dignissim mattis. Phasellus sit amet nunc eu est scelerisque tincidunt sit amet vitae sem. Sed ut nisi lorem. Vivamus ut felis libero. Vivamus venenatis justo ante. Nunc elementum interdum dolor, sit amet condimentum diam fermentum ac. Sed dictum condimentum arcu, id ornare turpis accumsan eu. Praesent ultricies egestas nulla at consectetur. Nunc sed est nulla, sit amet aliquam purus. Nam semper lacinia egestas. Nunc dictum lobortis arcu at bibendum?

Donec commodo nulla et magna malesuada a euismod metus aliquam. In hac habitasse platea dictumst. Vivamus mattis, nisi ac commodo cursus, metus justo eleifend sem, non auctor nisi felis eu tellus. Duis convallis condimentum elit, quis ullamcorper odio commodo ac. Aliquam ornare commodo fermentum. Aenean ut diam sed.

Aquí hay dos ejemplos más que cambian las propiedades de #tt, en uno, se usa una imagen de fondo eb lugar de un color plano y en la otra se establece el color de fondo como transparente.

39 comentarios:

Solidaridad  

JMIUR intente hacer un div y meter las 2 imágenes que tengo de fondo y no me resulta, me puedes indicar exactamente como colocar el div a las imágenes, lo otro y tu perdona tanta molestia, quisiera quitar la palabras que sale abajo de la entrada y que dice "entrada antigua", "entrada mas recientes", "pagina inicio".
gracias JMIUR

Responder
Loco 21  

Hola.

Estoy editando el diseño de un blog y tengo un problema. Coloque dos filas verdes a los costados del blog, (contenedores) Lo hice manejando los codigos que tu tienes. Una fila me quedo bien, pero la otra no aparece. Sabes cual sería la razon??

El blog es este.

http://modelo-ac.blogspot.com/

Responder
Gem@  

Me encanta el efecto queda muy elegante, ufff otra entrada a probar con el trabajo que tengo!!
Sigo dando vueltas ¿sabes? he probado a quitar el formulario incrustado y tampoco furula el invento :(

Responder
JMiur  

Solidaridad: Dependera de la imagen que quieras poner y del resultado que quieras mostrar, leeré tu mail a ver si entiendo la idea. Para quitar la navegación busca esto y elimínalo:
<b:include name='nextprev'/>

Loco 21: Por lo que veo, colocas esto:
#outer-wrapper {
background:#FFFFFF url(http://img190.imageshack.us/img190/9429/1lineaverde.png) repeat-y scroll 0 0;
es una imagen de 21 pixeles de ancho y por lo tanto, solo se muestra a la izquierda. Lo que debes hacer es una imagen mucho más ancha, de 1040 para que ocupe todo el ancho, es transparente o blanca en el centro y verde en ambos extremos.
Otra alternativa es que agregues un DIV debajo de outer-wrapper y allí, coloques la misma imagen o una similar de 21 pixeles pero alineada a al derecha. Algo así en el CSS:

#outer-wrapper-inner {
background:#FFFFFF url(http://img190.imageshack.us/img190/9429/1lineaverde.png) repeat-y right 0;
width:100%;
}

y en la plantilla:

<div id='outer-wrapper-inner'>
y el cierre </div> al final de la plantilla.

Gem@: Es de los más elegantes que he visto aunque estos cosos no me gustan mucho :D Lo del invento, es verdad, me suena a que el script no prevee manejar esos objetos y de allí el problema casi insoluble.

Responder
MALINA  

Hola Jorge, una consulta que nada tiene que ver con esta entrada. En Conectablog tengo un sidebar superior y 2 sidebar inferiores por debajo, pero cuando estoy en las páginas individuales se desplazan y no quedan bien, sabes la forma de que queden fijas por debajo de la sidebar superior más ancha?

Besossssss

Responder
Manfenix  

Hola JMiur, recién termino de aplicar el tooltips a mi blog principal. Quedó genial. Una consulta. Tengo en el blog una serie de imágenes que se desplazan de izquierda a derecha y se amplian al tocarlas con el mouse. Intenté aplicar el tooltips, sobre el código del elemento html de esa imágenes, pero solo pude armar una serie de lineas span independientes para cada imagen. Cómo tendría que vincular estos código para que el movimiento sea el mismo?. Gracias por tu atención. Saludos.

Responder
JMiur  

Malina:

Lo que ocurre es que las sidebars flotan eso hace que, cuando la altura de lo que está a la izquierda es poca, lo que está a la derecha (la sidebar inferior) se va a la izquierda ya que no hay nada. Un ejemplo donde no pasa eso es este post.

Para resolverlo, TODAS las sidebar deben estar dentro de un div que las contenga y ese div es el que debe flotar. Algo así es lo que se explica en estas dos entradas 1 2.

No es difícil de hacer.

Responder
MALINA  

Me pondré a estudiarlo un poco. Ya te contaré

Besossssss

Responder
JMiur  

Suerte, Malina :)

Responder
Graciela  

se vé maravilloso, claro que lo haces vos!!!...cuando intenté poner 'muy caserito todo' una imágen como tooltips...me preguntaban a donde conducía...por lo que seguimos a la vieja usanza :)
Viste el nuevo plan de internet para jubilados??? ;) deberíamos inscribirnos???

Responder
Claudio  

No comentaba porque no me salia el efecto :D

Pero ya lo probé y es interesante, quizás para pequeñas definiciones o algún uso se le dará.

Se agradece Master, buen aporte!

Responder
JMiur  

Graciela: Adelante con los planes, es mejor que quedarse en la plaza a jugar dominó :D

Claudio: Había un error en el post. El script debe estar al final de la plantilla y no al principio.

Responder
Manfenix  

Este es el código para una imagen desplazándose de izquierda a derecha, que se detiene y agranda al tocarla con el mouse. Le aplique el tooltps sin problema pero cuando quiero que salgan otras imágenes a continuación, en vez de mostrarse una tras otra, se encolumnan. Se puede lograr lo que quiero?. En mi blog de prueba están los ejemplos, ManfenixII
Perdón por la insistencia. Saludos.

Responder
JMiur  

Lo siento, no vi el comentario anterior. No es una pregunta sencilla de responder porque las marquee no son nada flexibles.

Veo que en el codigo el SPAN del tooltip está fuera de la marquee. Si esta contiene varias imágenes, cada una de ellas debería tener ese SPAN así que deberían estar adentro y no afuera.

Responder
Graciela  

en las plazas de aquí no hay mujeres, ohhh por qué será???

Responder
JMiur  

Graciela: ¿estarán tejiendo mañanitas o regando los malvones? :D

Responder
JuanCarlos 3941  

Cómo puedo hacer para poner estos tooltips utilizando también floatbox? Pq me da error y las ventanas no se abren! Ayuda JMiuuur xfa!!!

Responder
JMiur  

No sabria contestarte si interfieren entre si o no, todo es posible. Tendría que ver un ejemplo online para darme cuenta si es que hay un error que pueda solucionarse.

Responder
Manfenix  

Hola JMiur, al usar el tooltips con imágenes de ancho grande se produce un desbordamiento del marco. Aquí ves el problema.
Cómo lo puedo solucionar??

Responder
JMiur  

Sí, es lógico. Lo que debería ahcerse es no usar imágenes grandes porque no es una ventana modal. El espacio disponible es el espacio del rectángulo donde se inserte.

Podrías automatizar eso agrenado límites alas imágenes. Algo así:

#tt img {
max-width:VALORpx;
max-height:VALORpx;
}

Responder
Manfenix  

Gracias JMiur, :)

Responder
Manfenix  

Para solucionar el problema estoy combinando el tooltips con el lighwindow.
Queda mejor de lo que pensaba. :)

Responder
JMiur  

Perfecto, de eso se trata este juego :D

Responder
SMB  
Este comentario ha sido eliminado por el autor.
Responder
JMiur  

Una imagen de findo se coloca de este modo:

#tttop {background: transparent url(http://img4.imageshack.us/img4/3526/tttop.gif) no-repeat left top;}

En el ejemplo no se usa nada de eso. sólo se define el fondo general así:

#tt {background-color: CornflowerBlue; .........}

así:

#tt {background-color: transparent; .........}

o así:

#tt {background: transparent url(una_imagen); ........ }

Responder
SMB  

Muchas gracias JMiur!

Responder
SMB  
Este comentario ha sido eliminado por el autor.
Responder
JMiur  

El CSS se colcoa entre etiquetas style o bien en b:skin. No es parte del HTML que es esa parte que me estás mostrando. Antes de </head> por ejemplo:

<style>
........ aqui las definiciones de estilo ........
</style>

Responder
SMB  
Este comentario ha sido eliminado por el autor.
Responder
JMiur  

Para eso, tendrás que experimentar y ver si es posible conseguirlo o utilizar dos deficiones distintas, una para transparentes y otra para no-transparentes.

Responder
nEjO  

hola se puede lograr esto con una imagen mapeada qeu tenga varios link?

Responder
JMiur  

¿Mostrar esa imagen en un tooltip? Supongo que si, aunque será muy engorroso de escribir.

Responder
nEjO  

@JMiur no exactamente, me referio a: que si una imagen mapeada puede tener mas de un tooltip? y que esos tooltip sea por ejemplo de color rojo o como los de tu ejemplo

Responder
JMiur  

No tengo la menor idea, vas a tener que probar y ver qué pasa.

Responder
m3nd3z  

Hola Jmiur.
Muy bonito el tooltip y todo, pero tengo una duda:
Como es muy engorroso ponerle la etiqueta span class="hotspot" a varios elementos que tendrán el mismo mensaje en el tooltip, conoces alguna forma para que un elemento con una clase(un div, un span, etc) muestre el mensaje?

No sé si me hice entender...

Responder
JMiur  

Ni idea. Para eso, tendrías que modificar el script.

Responder
m3nd3z  

Heh, yo de nuevo =P

Solo quería saber si conoces alguna forma para que el tooltip reconozca los bordes del navegador y se adapte para que no aparezca la barra de scroll lateral.

Responder
JMiur  

Lo desconozco. Probablemente si pero no sabría decirte cómo.

Responder
Carlitox en la web  

Hola JMiur... He tomado tu ejemplo y le he hecho unas modificaciones adaptadas para una carga aun más rápida, espero no haya problemas.... Saludos :)

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