Los tooltips son descripciones emergentes que ayudan a dar un mejor entendimiento sobre el contenido que se lee. Algo muy parecido en HTML es el atributo title que hace lo mismo, muestra una descripción de un enlace, una palabra o una imagen, por ejemplo este texto.
Los tooltips son y hacen lo mismo que el atributo title pero a diferencia de éstos últimos se pueden personalizar la forma, el color de fondo, el texto, etc.
Hay muchas maneras de ponerlos, y por la red abundan muchos scripts que incluso pueden darle algún efecto adicional.
En este primer caso vamos a ver cómo crear tooltips usando sólo CSS sin nada de Javascript para no hacer la página más lenta y pesada.
Puedes ver el resultado pasando el cursor aquíEste es un tooltip hecho sólo con CSS. El mensaje se mostrará sólo al pasar el cursor y desaparecerá al quitar el cursor de encima..
Puedes ver el resultado pasando el cursor aquíEste es un tooltip hecho sólo con CSS. El mensaje se mostrará sólo al pasar el cursor y desaparecerá al quitar el cursor de encima..
a.tooltip { /* Estilos del texto que tiene el tooltip */
position: relative;
z-index: 24;
cursor: help;
text-decoration: underline;
}
a.tooltip:hover {z-index: 25; text-decoration: none;}
a.tooltip span {display: none}
a.tooltip:hover span { /* Estilos de la descripción */
display: block;
position: absolute;
top: 2em; left: 2em;
width: 16em;
border: 1px solid #0cf;
background: #ECE0F8;
color: #000;
text-align: center;
}
Y ahora siempre que quieras usar un tooltip usa este código dentro de tus entradas:
<a class="tooltip">Pasa el cursor aquí<span>Este es el mensaje que se mostrará al pasar el cursor.</span></a>
En el código sólo hay tres cosas a tomar en cuenta, lo que está en negrita siempre se debe poner para que aparezcan los estilos del tooltip; lo que está en azul es el texto al que se le pasará el cursor encima; y lo que está en color rojo es la descripción.
Ciudad Blogger
Genial Potro!
ResponderEliminarMuy buena herramienta, la tendré en cuenta.
ResponderEliminarExcelente potro :)
ResponderEliminar"Y el Potro lo iso otra vez!!!" jajajaja
Saludos men gracias :D
Jajajaja, el fin de semana vi ese programa y me mataba de risa cuando lo escuché :P
ResponderEliminargracias potro, como se podria hacer con las pestañas del navedor por ejemplo tu pagina pasa el cursor sobre la pestana y sale la entrada y el nombre de tu blog
ResponderEliminarEsa es una característica del navegador así que ahí no tenemos manera de modificarlo.
ResponderEliminarGrande Potro!!!
ResponderEliminarLo que te había pedido la otra vez, pero el blog que me pasaste se me complico por que se lo quise aplicar a las imágenes y no pude, pero al texto si jejeje
Saludos compañero!!!
Tio, esto es genial, por cierto, ahora tienes 985 seguidores...
ResponderEliminarCuando llegues a 1000 haz una fiesta e innvitanos, ¿vale?
:D
Aunque a este ritmo para antes de que acabes la semana ya estas... O.o
Muy bueno Potro.
ResponderEliminarMuy buen truco.
ResponderEliminarYa me servira cuando escriba una palabra que mis lectores no entiendan.
Saludos.
Pozo+10™, espero y este no se te haya complicado :)
ResponderEliminarDrawer 4 Everyone, jaja, no estaría mal, qué lástima que todos estamos distribuidos por todo el mundo, sino sí hacía algo =)
Vku, gracias men, qué bueno que te gustó!
Dankey, sí, básicamente esa es la función principal de los tooltips, seguro la ocuparás en algún momento.
olle potro que buena ayuda nos as dado a cada uno de nosotros, ¿podrías (claro si tu quieres) promocionar mi blog?
ResponderEliminarQEU GENIAL FELICIDADES, Y SI QUIERO AGREGAR UNA IMAGEN CON LINK EN LUGAR DEL MENSAJE DE TEXTO?
ResponderEliminarHola
ResponderEliminarEsta es mi segunda consulta directa. He buscado en este blog la manera de suprimir una entrada en mi blog y no encuentro algún post al respecto. Lo que sucede es que en algún momento publiqué una entrada misma que envié en un link vía mail. Después tuve que suprimirla, lo hice directamente en administración de entradas. Ahora, no aparece en mi blog por ningún lado, pero las personas que conservan ese link siguen viendo la entrada que según yo había borrado. ¿Cómo le hago para eliminarla definitivamente de la red?
Saludos
JuanBnna, lo siento, no puedo hacerlo :(
ResponderEliminarnEjO, entonces en la parte del texto que se mostraría pon el código de una imagen, pero no te funcionará del todo bien, pues recuerda que el mensaje se quitar al quitar el cursor así que el usuario nunca podría dar click sobre su enlace. Para eso hay otros tipos de tooltips con Javascript que pueden hacerlo, pero este no.
Blogtometría, si ya la eliminaste entonces ya se debió eliminar de la red, es posible que ellos puedan verla sólo por correo pero en la red ya no. Una página borrada conserva un caché y la página se puede ver a través de ese caché pero dura pocos días, al poco tiempo deja de verse por completo.
Se puede aplicar a imagenes?.
ResponderEliminarGracias por existir e iluminar nuestros blogs con tus consejos.
Un saludo
...traigo
ResponderEliminarsangre
de
la
tarde
herida
en
la
mano
y
una
vela
de
mi
corazón
para
invitarte
y
darte
este
alma
que
viene
para
compartir
contigo
tu
bello
blog
con
un
ramillete
de
oro
y
claveles
dentro...
desde mis
HORAS ROTAS
Y AULA DE PAZ
TE SIGO TU BLOG
CON saludos de la luna al
reflejarse en el mar de la
poesía...
AFECTUOSAMENTE
CIUDAD BLOGGER
ESPERO SEAN DE VUESTRO AGRADO EL POST POETIZADO DEL FANTASMA DE LA OPERA, BLADE RUUNER Y CHOCOLATE.
José
Ramón...
Hola Potro,
ResponderEliminarNos podrías dar el código del gadget que tienes en la sidebar: Elige como estar más cerca de la ciudad
Gracias!!
Hola ELFARFULLI,
ResponderEliminarPor supuesto, sólo cambia el texto en color azul por el código de la imagen a la que le quieres aplicar el tooltip, quedaría así:
<a class="tooltip"><img src="URL de la imagen" />
<span>Este es el mensaje se mostrará al pasar el cursor.</span></a>
Saludos.
José Ramón, muy bello el poema, muchas gracias =)
ResponderEliminarJavierlota, claro, el menú que uso es este.
olle portro como puedo aser para que visiten mi blog?
ResponderEliminarPublicando seguido y con mucha paciencia. Si publicas contenido de calidad verás que con el tiempo te llegarán visitas.
ResponderEliminarGracias Ciudad!
ResponderEliminarTenia pensando aplicarlo con CSS, me resulta muy util,
Un cordial saludo.
Che potro,me darias alguna sugerencia para publicar mi blog en un directorio y aumentar las visitas de 5 por dia :( A MAS??
ResponderEliminarAdrián J. Messina, gracias a ti por tu visita ;)
ResponderEliminarDatos Del Blog , mira esta entrada de Cyberbloggero, ahí tiene los mejores directorios.
Potro <333 otro genial aporte O: se ve muy interesante *-*
ResponderEliminarpues yo venia a molestarte u___u es que realemnte necesito ayuda xDDDDD he intentado de todas las maneras posibles pero mi propia creacion no me deja xDDD
Pues diseñe un nuevo layout para mi blog y resulta que no puedo configurar la segunda sidebar (right) para que los widget esten enmarcados por separado T__T he intentado todo lo que se me ocurria DDD:! mis neuronas de 17 estan lelas xD
ojala tengas alguna solucion ;_;
si quieres criticar mi diseño seria un honor *----* xDDDD
besos Potro <3
tu admiradora LOL xDDDDDDDDDDDDDDDDD
Hola Potro, que tal???
ResponderEliminarUna consulta. En mi blog, las imágenes png, osea sin fondo, en los posts se ven con fondo blanco. Es por la plantilla o se puede modificar???
Disculpa potro xDDD me olvide de poner la direccion de blog S:
ResponderEliminarhttp://miraiparadiseyunjae.blogspot.com
nos vemos <3
Gracias Potro ;)
ResponderEliminarGracias Potro ;)
ResponderEliminarHola Mirai,
ResponderEliminarPrueba poniendo antes de ]]></b:skin> esto:
.sidebar-right .widget {
border:1px solid #000;
}
Dale vista previa y mira si los gadgets quedan enmarcados por separado.
De tu blog ya sabes que me gusta mucho el diseño =)
Besos preciosa!
Pozo+10™, ¿en cuál blog?
ResponderEliminarJavierlota, gracias a ti por tu visita.
gracias potro!!! *---* si fuera mayor me casaria contigo xDDD pero yo no poder u_u xDDDDD
ResponderEliminareso exactamente no me funciono pero me hiciste dar otra idea xDDD, no se cual sea exactamente el problema de no poder separar todo el "Sidebar- right" e___è pero por lo menos separe el interior de los widget @_@
me quedo asi Dx!
/* SIDEBAR(S) */
.sidebaradbox {
margin-top: 5px;
text-align:center;
}
.ad125 {
margin: 10px;
}
.sidebar {
margin: 0 0 10px 0;
color: #747360;
}
.sidebar-right {
width: 200px;
background: #d32d4c;
border:15px solid #696966;
padding-left: 10px;
padding-right: 10px;
margin:0 0 1.0em;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
.sidebar-right .widget {
border:0px solid #000;
background: #3a3a38;
margin:0 0 1.5em;
padding:0 0 1.5em;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
.sidebar-left .widget {
border:0px solid #000;
background: #3a3a38;
margin:0 0 1.5em;
padding:0 0 1.5em;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
.sidebar-left {
background: #d32d4c;
border:5px solid #d32d4c;
padding-left: 2px;
padding-right: 2px;
margin:0 0 1.0em;
font-weight:normal;
text-decoration: none;
font-size: 11px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
.sidebar a {
text-decoration: none;
color: #ffffff;
}
todavia no encuentro el problema potro ;___;
Qué linda, si tuvieras la edad con gusto te lo pediría =)
ResponderEliminarAhora me queda una duda, sino era enmarcarlos ¿a qué te refieres exactamente con "separar"?
Es decir, ¿quieres que sea como se aplicó a las dos sidebar pero que sea sólo en la derecha y la izquierda no? ¿o se trata de otra cosa?
*oficialmente se casa con el potro xDDDDDDDDDDDDDDDDDDDD*
ResponderEliminarBueno la verdad es que no se si me explique bien al principio O: lo unico que queria era que solo la "sidebar-right" estubiera enmarcada al igual que las entradas y que la "sidebar-left" solo quedara tal cual esta ahora.
De ninguna de las dos maneras que intente funciono y ya no se me ocurre nada e___è pero no importa xD quedo bien asi como esta aunque no lo hubiera planeado 8DDDD
Muchisimas gracias >w< todo mi blog te lo debo a ti xDD
Oye potro esque quiero poner un banner arriba de los post pero quiero que nomas aparezca en la pagina principal y que al entrar a una entrada desaparesca que codigo puedo colocar?
ResponderEliminarvi en unos de tus comentarios que decias que coloquemos un codigo para poner algun elemento y que al accesar a la entrada este aparesca:
(yo lo quiero hacer pero al reves que el elemento aparesca en la pagina principal y al entrar a cualquier entrada desaparesca, le are?)
una ultima cosa algun tutorial para aprender a manejar el codigo de blogger y css porque hay algunos codigos que no se ni para que sirve xd
Mirai, la verdad es que así como ha quedado tu plantilla la veo muy linda :)
ResponderEliminarLuis, mira esta entrada. Respecto a los demás códigos, sino sabes para qué son es mejor no tocarlos, a veces quitar algo que no sabemos qué es puede resultar desastroso.
muchas grasias potro me sirvio de maravilla graxxx man =)
ResponderEliminarMuchas Gracias Potro
ResponderEliminarQué tal, Potro!
ResponderEliminar¡Wao, 1,000 ciudadanos y continúa la cuenta...! Felicidades! Eso demuestra la calidad de este blog. Sigue así.
En cuanto a esto de los tooltips, valió la pena la espera. Si recuerdas, hace como una semana te escribí pidiéndote nos enseñaras cómo hacer algo así, y prometiste publicar un post al respecto más adelante. Bueno, promesa cumplida de tu parte. Gracias. Voy de una vez a usarlo en mi blog.
Como yo no sé nada en cuanto a las características de esos lenguajes java, css, etc., tengo una preguntita: este tooltip, hecho en base a css, ¿puede ser visto sin problema por cualquier visitante de un blog, sin importar cuál sea el navegador que usen?
Muchas gracias por todo y sigue adelante!
Seguro que antes de que acabe el año, ya llegas a los 2,000 ciudadanos. (No se si la plataforma blogger resista tanta multitud, ja, ja, ja!).
Saludos!
La verdad que este es mas simple pero igual se ve muy profesionál en un blog de Blogger. Ademas, siempre las ventajas del CSS están presentes. A mi parecer no tiene nada que envidiarle al que acabas de publicar.
ResponderEliminarUn abrazo!!!
Vicky, claro, debe poder visualizarse en todos los navegadores sin problema alguno. Gracias por esperar y por tus comentarios siempre tan amables :)
ResponderEliminarbro, coincido contigo, con un poco de talento se puede personalizar el tooltip de manera que quede como si fuera mejor que con una librería y sobre todo no hará nada pesado el blog.
Hola, Potro! Gracias por la aclaración.
ResponderEliminarAhora que puse este truco en uno de mis blogs y también en otro blog de pruebas, resulta que me funciona; pero a la vez, no me es funcional. Me explico.
Cuando utilizo los códigos para el tooltip en una entrada (poniéndo en modo html, obviamente) y luego publico desde ese modo, directamene, no hay ningún problema y sale perfecto.
Pero el problema es que si pongo el tooltip en modo html y luego paso al modo redactar, para, por ejemplo, continuar redactando la entrada, o también si trabajo sobre entradas ya publicadas, entonces me sucede que el código me arroja siempre el mismo error y se cambia el tooltip que ya tenía escrito y entonces queda mal.
Y sin importar cuántas veces lo haga, siempre me sucede igual, y aún en blogs diferentes. ¿Me podrías ayudar, por favor? Fíjate, por favor, para que veas los dos ejemplos:
Cuando me sale bien:
http://masdelatierra.blogspot.com/2010/08/prueba-de-tooltips.html
Cuando me sale mal:
http://masdelatierra.blogspot.com/2010/08/prueba-de-tooltips-mal.html
De antemano, muchas gracias por tu ayuda.
Hola Vicky,
ResponderEliminarDesconozco por qué te suceda eso, en sí no debería haber ningún problema si pasas a la pestaña Redactar, al menos yo lo he hecho tanto en este blog como en uno de pruebas y no tuve problemas con ello o.O
Bueno, es un poco extraño eso que me pasa. Me sucede en plantillas clásicas de blogger. No he probado con otras plantillas.
ResponderEliminarDe todas formas, muchísimas gracias por tratar de ayudarme. Porfa, si después te llegaras a enterar de cómo solucionar eso, te agradecería enormemente si me avisaras(y perdona la molestia).
Saludos!
Pues bueno, después de hacer otras pruebas más descubrí que esto sólo sucede con el editor actualizado, por alguna razón rompe las etiquetas de span y es por eso que no sale el tooltip.
ResponderEliminarSólo veo dos formas de solucionarlo, una es que edites el contenido desde Redactar y ya que tengas todo listo sólo agregas los tooltips desde Edición de HTML para que ya no tengas que regresar a la pestaña Redactar.
La otra es regresar al editor anterior y con ese no tendrás ese problema sin importar si estás en Redactar o Edición de HTML.
Saludos!
Qué tal, Potro!
ResponderEliminarBueno, gracias por haber seguido investigando. Qué bueno que tiene solución este asunto de los tooltips. Solo que tendré que tratarlos como al comer pescado: con mucho cuidado (ja, ja!).
Gracias por toda tu ayuda y tu contínua disposición a darnos siempre la mano.
Saludos!
No hay nada qué agradecer ;)
ResponderEliminarHola, Potro!! Este post es una maravilla, sé ke este tipo de cosas existen pero sólo sé ke pueden hacerse fácilmente hasta ke tú las publicas, más ke genial!!
ResponderEliminarTengo una petición, (¿Cuándo no???) =(. Tienes un post donde enseñas cómo subrayar y hacer ke los links cambien a diferentes colores mientras el cursor está sobre ellos, ese lo apliké cuando lo publicaste y lo amo, por cierto =), pero ahora kisiera ke me des el tip para subrayar los links solamente cuando kiero aplicar estos tooltips en una entrada. Ayyyy perdón por molestrte de nuevo, pero eres mi única salvación!!!
Mil gracias de antemano como siempre, eres un lindo =)
Hola Merlina,
ResponderEliminarNunca es molestia ;)
No he entendido muy bien. Si te refieres a subrayar el texto del tooltip sí se puede, el problema es que también se subraya el contenido del tooltip :\
=( Kería saber como haces tú para subrayar los textos, como por ejemplo en este post, donde pones pasando el cursor aquí, para aplicarlo en el tooltip, pero si es todo un rollo hacerlo, lo dejaré así =P
ResponderEliminarMil gracias de nuevo por tomarte el tiempo para responder!! Como siempre, eres un lindo. Besitos!!! =)
Ah pues justo en la entrada que mencionas sobre cómo personalizar los enlaces se explica cómo ponerle el subrayado, sólo es buscar donde dice:
ResponderEliminara:link {
Y poner debajo:
text-decoration: underline;
Con eso los enlaces del blog estarán subrayados.
Si quisieres que sólo algunas cosas estén subrayadas y no todas entonces puedes encerrar el texto que quieres subrayar entre <u> y </u> y con eso quedará subrayada la palabra que deseas.
¡Besos!
Potro quisiera saber porque cuando coloco todo como habeis puesto arriba, al probar, funciona bien pero las ventanitas que aparecen con la descripcion aparecen siempre en un mismo lugar y no con las palabras en la que se aplico, y cuando voy bajando la pagina pues ya no se ven las descripciones porque se quedaron arriba. Si no me epxlico bien, puedes ver como quedo, www.funse.blogspot.com has click en leer mas y las plabras resaltadas o en negritas esas son las que tienen los tooltips
ResponderEliminarDebe ser por algún estilo que has modificado en tu plantilla. Yo lo he probado con las plantillas nuevas de Blogger y me ha funcionado sin ningún problema.
ResponderEliminarPerfecto!!! Ya kedó!!! Mil gracias, por responder y por la súper ayuda.
ResponderEliminarBesito x 1000!!! =)
P.D. Eres un lindo!!
Gracias por los besos!!!!
ResponderEliminarPotro me respondistes el comentario que hice o el de Merlina, solo para saber, porque no entiendo lo de haber modificado algun estilo, púes lo he colocado tal cual, y no movi nada. Espero me puedas ayudar por favor, acá esta la dirección del blog, para que veas como ha quedado http://funse.blogspot.com/ esta en la parte de la introducción al blog, en las letras que estan en negritas, el problema es que la ventanita emergente o tooltips siempre aparece en la misma posición y mientras uno va bajando la pagina ellas siguen aparecioendo en la misma posicion, asi que si la palabra en la que se le aplico el tooltips esta en la parte final de la entrada no se ve la descripción porque la ventanita emergente sigue apareciendo arriba. Si alguna persona le sucede lo mismo por favor comenten. Muchas gracias por tus aportes proto
ResponderEliminarTe respondí el tuyo. Me refiero a que algún cambio que hayas hecho en la plantilla pudo haber afectado la forma que se muestran los tooltips.
ResponderEliminarEsto es porque probé ponerlos usando la misma plantilla que usas y funcionaron sin problema, así que algún otro cambio que hayas hecho antes a la plantilla puede ser el causante de que se muestren así.
A muy bien gracias amigo, pues la verdad no sé que cambio podria estar afectando la aplicación del tooltips, pero deber haber alguna solucion, quizas otro tipo de tooltips que no de este problema, o si te envio la plantilla y la revisas ¿podrias ayudarme a identificar el problema?? esas explicaciones adjuntas a cualquier palabras o imagen me serian util para poder exponer mejor las clases a los alumnos, agradesco mucho tu apoyo potro, y gracias por tus prontas respuestas.
ResponderEliminarPues podrías probar con el tooltip hecho con jQuery:
ResponderEliminarhttp://ciudadblogger.com/2010/08/tooltips-con-jquery.html
=( Hola, regreso a la interminable molestia =( Pensé ke ya me había kedado perfecto este aditamento pero resulta ke ahora ke lo publico, a la hora de poner el código de pasa el cursor aki, etc., etc., aparece en la entrada pero 1) sale cortado, 2) me aparece en forma de link, en el código me aparece www.blogger.com =S sin ke yo lo ponga, y a la hora de poner el cursor en la palabra, si le aprietan, los manda a una página inexistente. Kité los códigos ke me diste anteriormente para poder subrayar , pensando ke eso era lo ke estaba mal, pero no es eso =( algo estoy haciendo mal o es más bien algún código anterior ke está interfiriendo??? Perdón por molestarte, ojalá puedas ayudarme, (como siempre, ps porke eres un lindo) Gracias por adelantado =)
ResponderEliminarSeguramente después de poner el tooltip has entrado a la pestaña Redactar. Cuando eso sucede suele agregarse la URL para editar la entrada y seguro que es ese el enlace de Blogger que mencionas.
ResponderEliminarLa recomendación es que escribas tu entrada normalmente y en la pestaña Redactar edites todos los estilos que quieres, ya que lo has hecho y que no harás ningún otro cambio ve a la pestaña Edición de HTML y agrega los tooltips sin regresar a la pestaña Redactar.
¡Saludos!
¿Así o más ñoña?!! jajaja, mil gracias por la iluminación!!
ResponderEliminar¡Besos!
A todos nos pasa, no te preocupes ;)
ResponderEliminarQue bonito Bro!! y Sólo con CSS!!! Me encanta. Últimamente lo estaba viendo en muchas Webs, pero la verdad que no se ni que se llamaban tooltips :$
ResponderEliminarUn abrazo!!!
mmmmmmmm creo que me esta fallando mucho la memoria :$ vi este post, lo leí, y hasta comenté de nuevo... y ahora veo que ya había comentado, por ende, ya lo había leído, por ende... me olvidé lo que iba a decir :P
ResponderEliminarJajajajajaja, te lo juro bro que empiezo a creer que algo extraño le pones a tus mates, esa mala memoria no es normal, jajajajajaja.
ResponderEliminarCreo es algo que me tendré que replantear, quizás tenga que cambiar de marca de Yerba o_Ó
ResponderEliminarJajajaja, tendrás que guardarme un poco de esa para cuando vaya a Argentina pueda perder también la memoria un poco, jajaja.
ResponderEliminarOk, te la guardo, pero para cuando vengas, ademas de esa sustancia que me hace perder a memoria, va a tener todas las toxinas del Moho y otro hongos :P ¿o te vienes pronto? jejeje.
ResponderEliminarUn abrazo!!!
hola potro una duda (cuando no) donde debo poner este codigo el caul es de una imagen "mapeada" que tiene varios enlaces y es este: (img src="http://dl.dropbox.com/u/11548740/EMOTI/bother.png" width="128" height="128" border="0" usemap="#map7" /)
ResponderEliminar(map name="map7")
(area shape="circle" coords="36,50,19" alt="joseeee" href="http://www.facebook.com/profile.php?id=100000223178786" /)
(area shape="circle" coords="81,72,26" alt="jose" href="http://www.pizcos.net/2009/12/header-profesional-con-gimp.html" /)
(/map)
Nunca lo he probado en imágenes mapeadas, pero supongo que hay que agregarle el a que indica que es un enlace y seguido a él agregar class="tooltip"
ResponderEliminarPero te repito, nunca he usado los mapas de imágenes así que no sabría decirte con exactitud cómo sería en esos casos.
perdon la ignoracia, no se como hacerlo alicandolo a un link, osea que al pasar el cursor por el link salga el tooltip.
ResponderEliminarEs del mismo modo, sólo se agrega el href con la URL del enlace:
ResponderEliminar<a class="tooltip" href="URL del enlace">Pasa el cursor aquí<span>Este es el mensaje que se mostrará al pasar el cursor.</span></a>
Si lo deseas puedes eliminar donde dice cursor: help; para que aparezca el cursor normal de un enlace en lugar del cursor con el signo de interrogación.
POTRO FIJATE QUE aunque no sean enlaces yo quiero ponerle un cursor que no sea "help" intente con "cursor: hand" pero no sale nada... sera posible cambiar algo o agregar un codigo?
ResponderEliminarA veces tienes que usar dos tipos de cursores para que acepte la orden en todos los navegadores. Ponle:
ResponderEliminarcursor: pointer;
cursor: hand;
¿Qué tengo que poner donde están las letras verdes?
ResponderEliminarNada, sólo son anotaciones por si deseas hacer alguna modificación, por ejemplo dentro de donde dice /* Estilos de la descripción */ verás que hay distintos estilos, por ejemplo, en border puedes modificar el tipo y color de borde, en background el color de fondo, en color el color del texto, etc.
ResponderEliminarFelicitaciones por el Blog! Lo descubrí hace poco y es de mucha ayuda. Una pregunta. El tooltip podría trabajar a la inversa?? Es decir, que el globo con la explicación se vea de entrada, y luego al pasar el mouse desaparezca???. A mí me interesaría esta forma ya que lo usaría con sólo una palabra o hipervínculo, para destacarlo del resto. Lo usaría como una especie de post-it pero no fijo, sino que se visualizaría por encima de la palabra o enlace que a mí me interesa destacar.
ResponderEliminarGracias y Saludos
Turfan
Bienvenido a Ciudad Blogger!
ResponderEliminarPuedes hacer que esté siempre mostrándose el tooltip y al pasar el cursor se quite pero una vez que se quite el cursor encima de la palabra volverá a aparecer.
Sólo hay que modificar la primera parte del código que has agregado, es decir en lugar de agregar eso agregarías esto:
a.tooltip:hover { /* Estilos del texto que tiene el tooltip */
position: relative;
z-index: 24;
cursor: help;
}
a.tooltip:hover span {display:none;}
a.tooltip {z-index: 25; text-decoration: none;}
a.tooltip span {display: none}
a.tooltip span { /* Estilos de la descripción */
display: block;
position: absolute;
top: 2em; left: 2em;
width: 16em;
border: 1px solid #0cf;
background: #ECE0F8;
color: #000;
text-align: center;
}
Saludos!
Muchas gracias por tu pronta respuesta! Me pondré a experimentarlo!
ResponderEliminarNo conocía esta entrada, este post tuyo. Está genial. Gracias por enseñar, potro.
ResponderEliminarUn beso
Gracias a ti por estar :)
ResponderEliminar¿Se puede aplicar a un enlace? Por ejemplo quiero poner en “acerca de y terminos”
ResponderEliminarClaro, sólo se agrega el enlace:
ResponderEliminar<a href="URL del enlace" class="tooltip">
Gracias!
ResponderEliminarHolas ahora queria saber si se puede hacer el truco en una imagen y que este a la vez tenga un enlace, algo como los anuncios o banners, espero me entiendas.
ResponderEliminarAhh y queria que fuera el comun, como tienes en "ESTE TEXTO" (hola, soy un title) por lo que vi seria algo como:
Texto
Pero no estoy seguro, porque no me salio...
Mira el comentario #19, ahí dice cómo debe ser cuando se trata de una imagen. Y en el comentario #85 cómo se agrega el enlace. Saludos.
ResponderEliminarYa lo encontre jeje, lo que queria era que esten juntas las dos (el enlace y la imagen, y tambien el texto), bueno la cosa es que vi el codigo de tus anuncios y me salio...
ResponderEliminarPor cierto como haces para poner los codigos aqui en los comentarios, queria ponerlo para futuros comentarios pero no me dejaba...
Saludos y gracias de nuevo
Te recomiendo esta entrada, entre otras cosas se menciona cómo poner códigos en los post.
ResponderEliminarEste es el codigo que encontre para el tooltips comun, y el que me gusta mas jeje
ResponderEliminar<a href="URL del enlace" target="_blank"><img border="0" alt="Texto" title="Texto" src="URL de la imagen"/></a>
Saludos El Potro
Ya sabes que me gusta darle mas clase a todas las herramientas que nos traes por eso en este te pregunto lo que te suelo preguntar:
ResponderEliminar¿Podemos poner una imagen en vez del fondo que aparece en texto tooltip? ¿Cómo?
Claro William, sólo cambia esto:
ResponderEliminarbackground: #ECE0F8;
Por esto:
background:url(URL de la imagen);
Gracias potro. Ahora algo más complicado...
ResponderEliminarAdemas de texto dentro de la tooltip, ¿puedo meter una imagen y texto que solo aparezcan cuando paso el cursor por encima de un texto?
No se si me estoy explicando bien. Reformulo:
Si pasamos el cursor por un texto, nos saldra otra ventanita con texto.
Yo quiero que en esa ventanita salga una imagen y además el texto.
¿Mejor asi? jeje
Espero con ansias tu incombustible sabiduría.
Con un ToolTip hecho con jQuery sí puedes incluir imágenes y texto, aunque ya no recuerdo si se pueden ambas al mismo tiempo.
ResponderEliminarPotro como puedo hacer para que aplique este metodo en una imagen pero que tenga un Link la imagen. Osea que al pasar el cursor salga la descripcion de la imagen pero que tenga su propio link, osea me refiero a la imagen.
ResponderEliminarMira el comentario #74, ahí está el código a utilizar.
ResponderEliminarHola Potro!
ResponderEliminar¿Hay alguna manera de colocar en vez de un texto, una imagen dentro del tooltip?
Es lo que estoy buscando desde hace días, pero no me fío de otras páginas.
Saludos. Rizel
Claro Rizel, sólo pon el código de la imagen en lugar del texto que mostrarías en el tooltip:
ResponderEliminar<img src="URL de la imagen"/>
Saludos.
ola potro tengo una pregunta como le agrego este tooltip alas imagenes de mi slider
ResponderEliminara
i m g alt='' src='URL DE MI IMAGEN' title='dobe+Premiere+Pro+CS6!..'/>
a
ESTA COn este atributo pero como le cambio el title por un tootip
ojala se pueda gracias
Con este sistema no creo que se pueda, como ves el tooltip que se maneja aquí tiene una estructura distinta, no usa el atributo TITLE.
EliminarTengo una duda, tengo unaserie de filas con los numeros de pedidos, y quiero que cada vez que se pasa por encima de cada numero de pedido aparezcan algunos dados del pedido (fecha y estado), es decir con escribir un comentario no me vale. ¿Como se puede hacer?
ResponderEliminarGracias
Hola, tengo una serie de filas con los numeros de pedido en cada una, y quiero que cada vez que se pase el raton por un numero de pedido aparezca algun dato (fecha y estado); he probado el tooltip con texto y me sale correctamente ¿Pero como se puede hacer para añadir los datos concretos de cada pedido?
ResponderEliminarGracias
Hola Rubén, de forma automatizada no se podrá con estos métodos. En el tooltip de manera manual e independiente tendrías que poner todos los datos que quieras a cada pedido.
EliminarSaludos.
Como se podria hacer para que al pasar por una imagen mostrara el tooltip la descripcion del juego?
ResponderEliminarEjemplo http://jorigames.com/
pero para un blog como el mio http://www.juegos09.info/ Gracias. Estoy aprendiendo mucho leyendo tu blog
Ahí es más complicado ya que cada imagen es una entrada. Desconozco si haya un método para ese tipo de entradas en Blogger.
EliminarEste comentario ha sido eliminado por un administrador del blog.
EliminarEste comentario ha sido eliminado por un administrador del blog.
EliminarHola amigo, gracias por tan valiosos conocimientos, este en particular andaba buscando, pero da la casualidad que yo quisiera que en lugar de que apareciera un texto de informacion al pasar el raton por el texto original, saliera una bella imagen, podrias ayudarme en un codigo, o si este mismo sirve y que debo de cambiar para que funcione como yo quisiera.
ResponderEliminarSaludos
Alex
Hola Alex, sólo agrega el código de la imagen en lugar del texto:
Eliminar<img src="URL de la imagen"/>
Este comentario ha sido eliminado por un administrador del blog.
ResponderEliminarEn mi caso, en vistas dinámicas, no funcionó ¿alguna sugerencia?
ResponderEliminarSaludos!
Revisa que cuando hayas puesto el primer código, el de los estilos, no hayas eliminado una llave de cierre }
Eliminarhttp://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html
El Potro, ¿cómo podría usar este truco pero que en lugar de tener subrayado el texto normalmente, que este subrayado por una línea punteada sutil? Muchas gracias.
ResponderEliminarCambia el text-decoration: underline; por border-bottom:1px dashed #ccc;
EliminarMuchísimas gracias El Potro, nuevamente sos un maestro!
EliminarJusto lo que buscaba, muchas gracias por esto... Tengo problemas aplicandolo al blog pero trastearé antes de rendirme...
ResponderEliminarGrande Potro...
Este comentario ha sido eliminado por un administrador del blog.
ResponderEliminarEs por la autopagiación, Blogger decide cuántas entradas deben mostrase según la velocidad de carga del blog:
Eliminarhttp://ciudadblogger.com/2011/06/cuando-en-el-blog-aparecen-menos.html
Gracias por el código de la imagen, aunque tuve que eliminar el comentario por el aviso que está al final :(
Saludos!
Leída esa entrada que habla sobre la paginación, y entendido el asunto. Pues vaya tela. Sé que tengo varias cosillas implementadas en el blog, pero sinceramente no creo que tarde tanto en cargar. Probaré a reducir aún más el tamaño de las imágenes y tal, pero vaya..
EliminarNo te preocupes por lo de borrar el comentario, lo comprendo perfectamente. Los fansubs somos unos incomprendidos =P
Después de todo lo que me has ayudado a lo largo del tiempo, y de todo lo que he sacado de Ciudad Blogger, no estoy en posición de quejarme por nada =)
El código que te pasé pues sí, supongo que a más de uno podría servirle, en BK-201 puedes verlo funcionando, y la verdad es que es pintón. Incluso se me ha ocurrido reformarlo para hacerle alguna sub-clase, y que así pueda funcionar con textos de tooltip con más de dos líneas, ya que la colocación de la imagen del before no cambia
Un saludo Potro, y como siempre muchas gracias. Eres un crack
Aprendes a pasos agigantados, te veré después creando un blog de ayuda ;)
EliminarAlguien me puede colaborar con el codigo para intruducir una imagen dentro de un tooltip...ya me trabaja bien en cualquier control, pero quiero hacerlo un poco mas dificil con imagen interna en el tooltip
ResponderEliminarHola, mira el comentario #99
EliminarGracias potro por tus aporte man
ResponderEliminarHola, muy bueno el codigo, el unico problema que tuve es que al crear una entrada y usar tooltips, no puedo cambiar al Modo Redactar porque se cambia el codigo del tooltip, y termina quedando como un enlace. Como puedo solucionar esto? Y ya no se puede volver a la interfaz antigua de Blogger...
ResponderEliminarNo hay forma Joaquin, tienes que editar todo lo que quieras en Redactar, ya que estés seguro que no necesitas hacer más cambios entonces ve a HTML y pon el código del tooltip a sabiendas que no volverás a cambiar a Redactar.
EliminarMuchas gracias por el truco lo usé y me funciono a la perfección
ResponderEliminarBunas noches amigo, sera que me puedes orientar con algo?? se trata de un tooltips pero que me permita insertar contenido html, como imagenes o frame, mejor dicho ya no seria un tooltips sino algo como un div oculto y al hacer clic o pasar el mouse se muestra, y que pueda contener contenido html es posible?? como puedo hacer eso??
ResponderEliminarHola, lo más cercano (que conozco) a lo que pides, son estos spoilers:
Eliminarhttp://ciudadblogger.com/2014/05/4-maneras-de-poner-un-spoiler-en-el-blog.html
Hola ,soy principiante en esto ,y cree un muñeco con html y css con div quiero saber si puedo agregar a la cara ojos etc y tambien quiero saber si puedo darle movimiento. Gracias
ResponderEliminarSupongo que sí ha de poderse pero desconozco cómo hayas hecho tu estructura y estilos, quizá convenga que preguntes a Kseso, él es experto en esto del CSS.
EliminarHola, Potro! Hace años me solucionaste un monton de cosas. Permíteme que te plantee ahora otra consulta. Quiero hacer un tooltip para aplicarlo a una lista de palabras. Como una especie de diccionario que, al pasar encima de una palabra, te remita a otra. Son unas 400 palabras, cada una de las cuales tendria su equivalente. Yo lo he visto en una web que utiliza tablas, creo. Quisiera hacerlo sin tablas, con unas listas de palabras dispuestas en columnas. Se puede? Gracias de antemano por tu paciencia.
ResponderEliminar