Cómo hacer Tooltip Imágenes

Una información sobre herramientas es como dejar una nota extra para el usuario. 

Tooltip IMÁGENES

Hacer una información sobre herramientas para un sitio web es una manera para los desarrolladores web para añadir información adicional a una página web, como la información en un enlace o la información de un campo de texto requiere que se tome. Tooltips son una forma de dejar una nota para el usuario cuando el ratón sobre una imagen o un texto. Cuidadosamente pensado tooltips son sutiles y ayudan a mejorar la experiencia de los usuarios. Información sobre herramientas son fáciles de agregar directamente al código HTML a través de CSS.

Agregue el código CSS en la sección de encabezado y debajo de la etiqueta del título del archivo HTML.

Tipo htmlheadstyle = text / css tip {border-bottom: 0px dotted # 000000; color: # 000000; contorno: none; cursor: pointer; text-decoration: none; position: relative;}.. punta lapso {margin-left: -999em; posición:. absoluta;} tip: hover lapso {border-radius: 15px 15px; box-shadow: 13px 13px 13px rgba (0, 0, 0, 0,1); font-family: Georgia, Times New Roman, Times , serif; position: absolute; izquierda: 1 em; top: 2em; z-index: 99; margin-left: 0; anchura:. 250px;} habitual {padding:. 1 em 0.8em;} habitual {background: # FFFFFF; frontera: 1px solid # FFAD33;} / estilo / cabeza

Inserte el siguiente código HTML en / cabeza para una muestra de la información sobre herramientas.

h1Examples cuerpo de información sobre herramientas CSS! / h1 p Ejemplos de la clase AA = punta href = # Tooltipspan class = Tooltips habituales se utilizan para agregar cuidadosamente pensado información para mejorar la experiencia del usuario. / Span / a / cuerpo / HTML

Para ver la información sobre herramientas, abra el archivo HTML en un navegador web y mantenga el puntero del ratón sobre la palabra subrayada información sobre herramientas.

Ajuste el código según sea necesario, por ejemplo, cambiar la decoración de texto para subrayar o el color de fondo # FFFFAA de amarillo.