JMiur [E]

Tooltip no es una palabra que pueda traducirse con facilidad. Estas ventanitas, generalmente de fondo amarillo o gris, aparecen cuando colocamos el puntero del ratón sobre un objeto de la pantalla.

Esta es una Tooltip (poner el puntero encima) ¿Y para qué sirve? Para muy poco, sin embargo, es posible crear algo que funcione de manera similar pero más interesante. Y para esto, basta tener una pequeña idea de como funcionan las hojas de estilo. Por ejemplo, esta es una TooltipEsto ya va tomando otro color
Si alguien quiere saber qué puede hacerse,
es mejor que continúe leyendo.
mejorada.

Es muy común creer que estos tooltips se agregan mediante el atributo ALT ya que Internet Explorer los muestra como tales, ¿y por qué Firefox no? La respuesta es simple, Microsoft no sigue las reglas, adapta los lenguajes a su conveniencia y de allí, las dificultades que se nos presentan al armar una página, hay cosas que ciertos navegadores harán de una manera y otros no.

La w3.org dice que el atributo alt debe ser utilizado como texto alternativo (para cuando no pude ser mostrada la imagen o el objeto) y que, el atributo para mostrar un tooltip es title="un texto cualquiera" (coloquen el puntero del ratón sobre cada imagen para ver la diferencia).

si me ven usan Internet Explorerpor si falta la imagen
<img src="..." alt="Internet Explorer"><img src="..." title="cualquier navegador">

El atributo title no sólo puede ser aplicado a una imagen, es aceptado por casi todos los elementos (ver lista completa):

UN LINK: para ver el ejemplo hay que poner puntero AQUI ARRIBA
UN PARRAFO: para ver el ejemplo hay que poner puntero AQUI ARRIBA

¿Y esto para qué sirve? Para muy poco, sin embargo, es posible crear un nuevo tipo que puede hacer las cosas más interesantes y para esto no hace falta saber JavaScript ni nada por el estilo, basta tener una pequeña idea de como funcionan las hojas de estilo.

Poniendo el cursor AQUI Ya no es una ventanita amarilla.
Es más grande, de otro color ...
la tooltip se transforma un poco.

Y poniendo el cursor AQUI Parece difícil pero no lo es. las cosas se ponen interesantes.

Puede contener cualquier COSAIncluso una tabla.
celda 1celda 2
celda 3celda 4


La clave está en estas propiedades:
display: establece si un elemento será mostrado y cómo será mostrado
     block un salto de línea antes y después del elemento
     inline ningún salto de línea antes ni después del elemento
     none no se mostrará

position: determina la forma en que se ubica un elemento
     relative es el valor por defecto
     absolute se lo fuerza a ubicarse en un determinado lugar

z-index: número de orden dentro de la pila de elementos
como los elementos pueden ubicarse en posiciones absolutas dentro
de la página, algunos pueden superponerse visualmente con otros,
para controlar cuál estará por encima, les asignamos un número entero,
cuanto más alto sea el número, más arriba estará
Y en este pseudoelemento:
hover que define el estilo cuando el ratón pasa sobre él
Creamos una clase CSS dándole un nombre único (cualquier nombre que no exista), en este caso, la llamé Ntooltip y la agregamos a las declaraciones de estilo de la plantilla. El código para este ejemplo es el siguiente:

a.Ntooltip {
position: relative; /* es la posición normal */
text-decoration: none !important; /* forzar sin subrayado */
color:#0080C0 !important; /* forzar color del texto */
font-weight:bold !important; /* forzar negritas */
}

a.Ntooltip:hover {
z-index:999; /* va a estar por encima de todo */
background-color:#000000; /* DEBE haber un color de fondo */
}

a.Ntooltip span {
display: none; /* el elemento va a estar oculto */
}

a.Ntooltip:hover span {
display: block; /* se fuerza a mostrar el bloque */
position: absolute; /* se fuerza a que se ubique en un lugar de la pantalla */
top:2em; left:2em; /* donde va a estar */
width:250px; /* el ancho por defecto que va a tener */
padding:5px; /* la separación entre el contenido y los bordes */
background-color: #0080C0; /* el color de fondo por defecto */
color: #FFFFFF; /* el color de los textos por defecto */
}

Y se debería usar así:
<a class=Ntooltip href="#">
     el texto visible
<span>
          ... el texto oculto (cualquier código HTML) ......
</span>
</a>
La explicación es esta. Vamos a crear un elemento A (un link) dentro del cual colocaremos un bloque mediante el tag SPAN. La clase NTooltip será el estilo de ese link.

Este tipo de link (estilo a.Ntooltip) se ve "normal" (position: relative), el resto de las propiedades depende de las necesidades de cada uno, puede modificarse el color, la fuente, etc. La única precaución que se debe tener es verificar si el estilo SE VE. Como la plantilla ya posee una definición para los elementos A, es probable que se deba FORZAR a que la nueva sea tomada en cuenta, para eso, podemos agregarle !important para forzar a que el navegador la use. Por ejemplo:
color:#0080C0 !important; font-weight:bold !important;
Cuando el puntero del ratón está sobre el link, el estilo cambia (a.Ntooltip:hover) le hemos dicho al navegador que está por encima de todo (z-index). Lo único que podría personalizarse es la propiedad background-color que DEBE ESTAR DEFINIDA, aunque sea con el mismo color del fondo de la página.

El bloque A contiene en su interior otro bloque (a.Ntooltip span) que, generalmente está oculto display: none). La página lo carga, pero no lo muestra.

Por último determinamos el estilo que tendrá ese bloque cuando al pasar el puntero del ratón, se haga visible (a.Ntooltip:hover span). Con display:block hacemos que el bloque se muestre y con position:absolute le ordenamos que quede fijo, que no desplace el resto de la página hacia abajo. Con estas dos propiedades logramos que se superponga a cualquier otro elemento de la pantalla, lo que produce el efecto deseado.

Es aquí donde deberíamos definir las características que tendrá la "ventanita" (colores, fuentes, alineación, bordes, etc). Sería deseable que decidamos cuáles serán las propiedades por defecto, de tal manera de no tener que escribir demasiado código cada vez que querramos utilizarlas.

Dentro del bloque SPAN que permanecerá oculto, puede escribirse cualquier tipo de código (probablemente no cualquiera, pero la mayoría). Asimismo, es posible sobrescribir el estilo que definimos por defecto. Para ello, basta agregar otro, dentro del tag SPAN. Por ejemplo:


Con las propiedades left y top podemos determinar la posición donde se va a mostrar, estos valores, expresados en pixeles (px), pueden ser positivos o negativo, por ejemplo, si top es negativo se verá por encima del puntero.

Por la estructura que tienen las plantillas de Blogger, es posible que el bloque no se vea por completo si su ancho sobrepasa la columna lateral. Al hacerse visible, el bloque se superpondrá sobre cualquier elemento del área principal (la de entradas) pero no sobre otras áreas. Es aconsejable que el vínculo visible quede siempre hacia el lado contrario de la pantalla.

REFERENCIAS CSS

  • HTML correcto (en castellano)

  • Taller de CSS (en castellano)

  • CSS Tutorial (en inglés)

  • Stu Nicholls CSSplay (en inglés)

  • 76 comentarios:

    Daniel  

    Voy a probar a poner los tooltips en mi blog para mostrar información del blogroll. Ya te contaré como ha ido.

    Responder
    JMiur  

    Genial. Cualquier problema, ya sabes ... aquí estoy.

    Una recomendación, ya que has tenido problemas con IExplorer, debes tener en cuenta que hay valores que los navegadores no interpretan igual (UNA LOCURA). La solución es probar y buscar "un término medio". La extensión IETAB para Firefox es una buena opción para "ver como se va a ver".

    Por lo que vi de tu blog, tal vez te interese Lightbox Es una rutina sofisticada y muy interesante. Ya te anticipo que estoy preparando explicaciones sobre ella y otras similares.

    Responder
    Daniel  

    Ya lo tengo. Ahora los links a otros blogs funcionan con tus tooltips, en ellos se muestra una imagen del blog y una breve descripción. Pasate a verlo, está en la barra lateral en el apartado "redesfera recomienda". Muchas gracias de nuevo. Saludos.

    Responder
    JMiur  

    Me has dejado mudo :O

    No sólo funciona perfectamente (incluso la vi con Internet Explorer) sino que has tenido una idea EXTRAORDINARIA para aplicarlas.

    Desde ya, te estoy pidiendo permiso para, alguna vez, utilizarla. Y, si no te molesta, editar mi post original y agregar un link a tu página para mostrar una aplicación concreta.

    ¡Ah, y para colmo, has leído mi biografía y la recomiendas! No sé ni que decir ni cómo agradecerte.

    Responder
    Daniel  

    Claro que puedes!
    Si la idea es tuya.
    Saludos desde el Mediterraneo.

    Responder
    Aroha M.  

    Hola,soy la otra mitad que compone el blog de redesfera.
    Desde luego, gracias a tus colaboraciones, el blog no es ni sombra de lo que fue al principio.
    Muchas gracias por todo campeón!

    Responder
    JMiur  

    Aroha: empecé este blog por que si, para divertirme, jamás esperé una respuesta.

    Te confieso que estoy sorprendido, agradecido y apabullado por tanta generosidad. La única palabra que tengo es: gracias, parece poco pero ninguna es suficiente para responder tanto halago.

    Responder
    Toni  

    Muy buen artículo, tomo nota y probaré a aplicar esa técnica en cuanto pueda.

    Responder
    JMiur  

    Me alegra haberte sido útil. Te agradezco mucho el interés y el comentario.

    Responder
    steppenwolf  

    Hola JMiur, antes que nada, aclarar que de esto, soy cero al as. Por lo que me gustaría pedir tu ayuda. Yo tengo una imágen en miniatura representativa de mi blog: ¿cómo puedo hacer para que al apoyar el cursor sobre ella, se abra un ventanita indicando el código que debe ser copiado para que algún lector lo coloque en su block, de manera tal que cree un link al mio? ¿Se entiende la idea?
    Desde ya gracias

    Responder
    Cazarratas  

    MUCHAS GRACIAS!!!

    Trabajo impecable y muy muy muy útil

    Responder
    JMiur  

    Me alegro que te haya servido.

    Saludos.

    Responder
    gogo  

    ahah no me resulta cual es el codigo del tooltip naranjo.

    Responder
    JMiur  

    Aclárame un poco el problema.

    Responder
    SolraC  

    Hola Jmiur,

    como siempre aprendo muchas cosas en tu blog, bueno, en Vagabundia, bolsa Negra, etc.

    Respecto a Redesfera, decirte que creo ya no corresponde el link, o al menos me da a mi la impresión .. dicho blog solo tiene 3 posts y son 'demasiado' recientes y sin venir a cuento.

    Un saludo,

    Solrackorner.

    Responder
    JMiur  

    SolarC: tienes razón, te agradezco el aviso.

    Lamentablemente es un blog diferente. Voy a editar el post para evitar confusiones.

    Responder
    Anónimo  

    Hola, este post tiene mucho tiempo y pero tengo una duda que aun no he encontrado por ninguna parte. Los tooltips los puedo poner en texto, imagenes, en enlaces. Dentro de un tooltips puedo colocar texto, enlaces, imagenes... Pero lo que todavia no he conseguido hacer es colocar un tooltip en un mapa de imagen, es decir, que al colocarte encima de una parte de la imagen que contenga un enlace salga el tooltip. Solo he conseguido que me aparezca el title="" (en firefox) o el alt="" (en ie). Si pudieras solucionarmelo seria de mucha ayuda, gracias.

    Responder
    JMiur  

    La verdad, nunca lo he intentado así que no te puedo decir si es posible o no lo es. Trataré de hacer alguna prueba.

    Responder
    Anónimo  

    Gracias por prestar tu tiempo y atención en mi problema. Si encontraras la solución me haría un enorme favor. Espero que tengas suerte porque yo ya estoy desquiciado jeje. Gracias de antemano ;-)

    Responder
    Pío  

    Muchas gracias, me ha resultado muy útil y sencillo

    Responder
    Hugo Mosh  

    Dos preguntas:
    Los elementos como http://www.snap.com/snapshots.php y https://www.apture.com utilizan esto? o como le hacen?

    Y por ultimo, si utilizo esta herramienta se sobre carga la pagina o es muy light?

    Responder
    JMiur  

    A la primera pregunta: no, esas herramientas utilizan scripts bastante sofisticados.

    La segunta pregunta también es NO. No estás agregando nada especial ni que recargue la página.

    Responder
    celulawilly_sofi  

    sirve de alguna manera para indexar mejor en google?

    Responder
    JMiur  

    El atributo ALT sirve para que Google indexe mejor las imágenes, eso es cierto. Los toottips sólo son efectos gráficos.

    Responder
    GAMA  

    ja tinha feito isso com minhas imagens..

    Boa dica

    uma forma de fazer tootips facilmente epor java script,um novo chamado

    " MORECSS "

    peskise sobre voce vai gostar ^^

    Responder
    JMiur  

    Voy a buscarlo y darle un vistazo :)

    Responder
    GAMA  

    Da para fazer coisas legais, como pop up ... tootltip marquee

    não soa muitos efeitos mas usa sintaxe do css

    super facil

    :D

    Responder
    Anónimo  

    Hola chicos, he visto este ejemplo para hacer el tooltip y lo he aplicado, pero me da problemas con el IE cuando lo puse en mi pagina html y no logro ves que hay en el css que pueda causarme este problema.En los demas navegadores funciona muy bien.Por fa si me ayudan, se los agradeceria!!

    un saludo
    lucia.

    Responder
    JMiur  

    No puedo saberlo si no se ve tu blog online.

    Responder
    Tita  

    Mil gracias! Está genial, era justo lo que andaba buscando, sin tantas complicaciones y aportas tu conocimiento gratis, mil gracias ;)

    Responder
    frankvf  

    muchas gracias genio...

    Responder
    Oscar Contreras  

    jejejejeje :)Gracias por el post fue de mucha ayuda bye..

    Responder
    lacajadepandora  

    NO funciona en drupal

    Responder
    JMiur  

    No tengo idea como es Drupal pero, esto es CSS así que funcionará en cualquier página web

    Responder
    lacajadepandora  

    Hola:

    gracias por responder, te explico lo que quiero hacer: es un banner que en el over presenta un bloque de texto de 5 párrafos de dos líneas, cada uno con una viñeta y también necesito que esto se vea en Internet Explorer 6

    He puesto tu codigo exactamente en mi portal en drupal (es un Administrador de contenido) y no funciona, el texto aparece publicado debajo de la imagen que estoy usando como link

    A parte de eso quiero saber si dentro del texto que se quiere mostrar podemos añadir viñetas

    Gracias por tu respuesta

    Responder
    JMiur  

    Tendría que verlo funcionando online para intentar responder eso.

    Responder
    lacajadepandora  

    El link donde lo puedes ver es http://www.utpl.edu.ec

    Responder
    JMiur  

    Pués, esto es lo que veo: captura. La posición la regulas con left y top.

    Sobre IE6 no puedo responderte.

    Responder
    Santiago Night  

    Hola JMiur! Desde hace al menos 2 semanas estoy dele darle vueltas al asunto del tooltip, pero no logro que funcione. De todo internet, veo que eres el único que ha puesto en forma clara esta herramienta. Pero ya no sé donde colocar el CSS que refieres en mi blog. Podrías indicarme por favor como haría para incluir una imagen y un texto que surgiera al posicionar el mouse sobre una palabra (el ejemplo que pones de ALGO GRANDE)

    Gracias, saludos!

    Responder
    JMiur  

    El CSS lo colocas entreetiquetas style, antes de </head>:

    <style>
    ........... aqui colcoas las definiciones
    </style>

    Lo segundo no lo comprendí bien, Lo que quieras que aparezca, lo colocas entre etiquetas SPAN dentro del enlace. Puede ser cualquier cosa, en ese ejemplo, es una tabla.

    Responder
    Santiago Night  

    JMiur, si algún día debo hacer un honor a alguien ese serás tú. Con mucha gentileza respondiste mi pedido, y he resuelto el problema que me aquejaba. Sinceramente no sé como agradecerte, ojála hubieran muchos más seres como tú. Tu ayuda posibilitó que ayudara a un amigo y ahora el producto será su webblog que es un comic donde , según acordamos, serás citado por tu noble ayuda. Ni bien esté online te aviso.
    Mil gracias, un fuerte abrazo

    Responder
    JMiur  

    No es nada, fue un placer :D

    Responder
    Sermax  

    Hola, es la primera vez que escribo, pero llevo siguiendo este blog mucho tiempo ya que me encanta ^^

    Quería preguntar si es posible poner links dentro del tooptip, ya que al ponerlos se quedan fuera y no consigo hacer que salgan.

    Hay alguna solución?

    Responder
    JMiur  

    Ene ste caso no ya que el tooltip ya es parte de un enlace.

    Responder
    Sermax  

    Pues nada..., muchas gracias por la respuesta tan rápida ^^

    Responder
    MI NOMBRE NO IMPORTA  

    Hombre eres un Maestro, tenia algo de tiempo buscando esto y por fin lo encontre, gracias, es un super aporte.

    :D

    Responder
    cristhoz  

    :D esta interesante

    Responder
    Aldemar  

    Esto si que sirve. Embarrada que me toca aplicarlo en algo que solo se puede ver en M$IE. Voy a ver como me va.

    Responder
    Aldemar  

    Acabo de implementarlo. Veo un punto débil. Si quiere que funcione en Internet Explorer a la etiqueta a debe ponerle un destino de hipervínculo obligatoriamente (asi sea un #). Ya que lo tenia que implementar en una aplicacion ASP que SOLO SIRVE EN M$IE. Planteé el código en Firefox y salió bien. Pero ese mismo en M$IE no funcionaba y encontré en otra página en inglés con ESTOS MISMOS PARÁMETROS y arrancaba en M$IE. Por suerte encontré qué paso.

    Un Saludo

    Responder
    JMiur  

    El atributo href es parte de cualquier enlace; si no hay destino implícito, debe usarse algo así: href="javascript:void(0);" o href="#", etc
    http://html.conclase.net/w3c/html401-es/struct/links.html

    Responder
    Gustavo  

    Hola recién leo este maravilloso articulo y ya lo he aplicado, ahora me surge una pregunta, existe alguna manera de evitar que el texto oculto se muestre en la vista de diseño de dreanweaver ? to funciona perfecto pero este pequeño detalle me molesta un poco y cada vez que quiero ver como la el diseño tengo que pre-visualizar en el navegador !

    Saludos y muy bueno todo los datos que pones !!

    Responder
    JMiur  

    No tengo idea cómo funciona Dreamweaver.

    Responder
    rowilson  

    gracias por el post, pero ahora las imágenes que tienes de "photo bucket" indexadas, no funcionan por exceso de band width (creo q muchas veces vista y tiene un limite)

    Responder
    JMiur  

    Sí. Ya sé que tiene un límite y también se que es un servicio espantoso donde cada vez hay más publicidad y menos opciones para detectar estos problemas que sólo son el resultado del hotlink abusivo de algunos sitios como Taringa y otros.

    En fin ... a medida que vaya encontrando los problemas iré tratando de solucioanrlos hastaq ue alguna vez ... ojalá ... me libré de Photobucket definitivamente :-D

    Responder
    nan ferper  

    Pero si es necesario un Javascript verdad?porque a mi no me sale sólo con css...

    Responder
    JMiur  

    No.Este modo n orequiere JavaScript.

    Responder
    Magoplup  

    Jmiur disculpa la ignorancia en este caso pero me preguntaba si el CSS debe ir agregado directo a la plantilla arriba de Skin o va directo en la entrada que se quiera usar el truco gracias..

    Responder
    JMiur  

    Si sólo lo vas a usar en una entrada, puede ponerse allí; si es algoque vas a usar en varias entradas, entonces debe colocarse en la plantilla.

    Responder
    Magoplup  

    Jmiur ya e logrado aplicarlo lo que no logro es ocultar el color solo para q se muestre una imagen sin el color elejido como predeterminado como podria lograrlo?

    Lo intente de este modo pero claro esta que estoy cometiendo un error :(
    <span style=background-color: display: none;>

    Responder
    JMiur  

    em el ejempo del post:

    a.Ntooltip:hover span {
    ....
    background-color: #0080C0; /* el color de fondo por defecto */
    }

    y para hacerlo transparente:

    a.Ntooltip:hover span {
    ....
    background-color: transparent;
    }

    o eliminar la propeidad background-color:

    Responder
    Carlos Aguillon  

    Que bueno, como haz aportado! justo lo que queria!

    Responder
    keko  

    Hola jmiur, todavñia no em ha dado tiempo a estudiarme todo lo que pones, pero con uan rpimera lectura me ha srujido una duda: ¿Es posible establecer el tiempo en el que te sale el tooltip, es decir apliarlo por ejemplo, que tengas que estar x segundo con el puntero para que te salga?

    Un salu2

    Responder
    JMiur  

    Con este tipo de ejemplo no. Co otro que use JavaScript, es posible.

    Responder
    nakahito  

    Si lo hago en una imagen el tooltip no sale del marco como hago para que aparesca a un lado y no se limite al ancho de esta.

    Responder
    JMiur  

    No entiendo a que te refieres; muestrame un ejemplo online.

    Responder
    XCris44X  

    Gracias, lo estaba bucando para un proyecto que tengo

    Responder
    Brench  

    Buen día:
    Me ha sido de gran ayuda, solo me gustaria saber si le puedo agregar estilos al texto dentro del tooltip, es decir negritas, italicas, etc.?

    JMiur  

    Tal como dice la entrada, dentro de la etiqueta SPAN puedes agregar casi cualquier cosa.

    Responder
    bayron.garcia  

    ummm bueno esto es lo que estoy buscando pero mi pregunta es : como agrego yo un tooltip a un boton

    JMiur  

    Esto en particular se aplica a los enlaces; si quieres aplciadrlo a otro tipo de etiqueta, deberás modificarlo.

    Responder
    Guillermo García Galindo  

    hola, me gustaría mucho implementar esta opción en mi blog pero he copiado tu código y no me funciona. no sé porque es debido dado que no hay lugar para la duda con tu explicación. Por ahora quería que apareciese en los iconos que tengo en el banner de arriba a la derecha, el barco, la diana, la hoja, la paleta.
    mi blog es www.orientalia.com.es
    si pudieras echarme un cable. Mi problema es que no me aparece lo que escribo en la etiqueta span. gracias !

    JMiur  

    Los textos del tooltip no se ven porque los ocultas; hay una regla en los íconos que dice esto:

    .icons a {
    .......
    text-indent: -9999px;
    }

    quita esa propiedad y los verás.

    Guillermo García Galindo  

    perfecto ! solucionado y rápidamente, muchas gracias. sabía que tenía que ser algo que hubiese puesto malamente

    Responder
    del batitú  

    hola Jmiur. vi tu post para implementar marquee y me encantó después pensé agregarle un tooltip y quedó bárbaro hasta que quise cambiarlo un poco _al tooltip_ y ya no lo vi más. Lo e revisado de arriba abajo y no encuentro lo que pudo haber pasado. si andás con tiempo me das una mano? chas grá
    http://pruebaypico.blogspot.com/2013/08/blog-post_8624.html

    JMiur  

    Dimensiona los enlaces de clase Ntooltip o agrégales la propiedad display inline-block

    a.Ntooltip {
    .......
    display: inline-block;
    }

    del batitú  

    listo D)

    Responder

    ¿Quiere dejar un comentario?

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

    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