Texto alterno con saltos de línea

[Elalux]

Saludos maestros, he aquí mi problema.

He visto que se puede hacer que cuando alguien pasa el mouse sobre un area de una imágen aparece un globito con un texto que puede ser multilínea, tal y como se muestra en la siguiente figura:



Me han dicho que se puede hacer con CSS pero la verdad no se como, ¿Alguien me podría hechar una ayudadita?

Agradezco desde ahora cualquier ayuda.

Saludos.

[sanxuan]

Siempre pensando en lo mismo. ¿Por qué les llaman globos?
Se llaman capas, técnicamente <div>. Supongamos que a su div lo llama <div id="TxtHover">.
Si no importa en qué parte de la imagen haya que ponerse para que aparezca, puedes usar
un selector #TxtHover:hover{}.
Si piensas que debería aparecer sólo cuando pases sobre alguna parte de tu imagen, la cosa se complica. Necesitasa usar un mapa de imágenes y definir las áreas que harán que se muestre esa capa. Es necesario saber lo que es la etiqueta <map> y <area>y el atributo "usemap" de <img>. Y por supuesto seguir usando la pseudoclase :hover.
Lo que hay que hacer es crear ese div con la información que desees. Defines para él la propiedad visibility:hidden para ocultarlo y a continuación usas la famosa pseudo-clase :hover y declaras dentro de ella visibility:visible. Eso hace que se muestre al pasar el puntero del ratón por encima del elemento correspondiente.

[jomaruro]

Hola:

Iniciado por sanxuan

Siempre pensando en lo mismo. ¿Por qué les llaman globos?

Quizá por que no todo el mundo tiene tus conocimientos y tu inteligencia. Además ¿porqué llamarle div si no tiene que ser un div necesariamente?

Elalux, léete este artículo: Tooltips usando CSS.

Saludos.

[Elalux]

Muchas grácias maestros, voya a trabajr en ello.

Saludos.