Información sobre herramientas HTML5 entre exploradores en CSS puro
| Autor: | freqdec |
|---|---|
| Views Total: | 2,969 |
| Sitio oficial: | Ir a la web |
| Actualizado: | August 4, 2016 |
| Licencia: | MIT |
Vista prévia
Descripción
Sólo otra implementación de CSS pura de la información de herramientas de DOM entre exploradores utilizando el atributo de datos HTML5 y varias propiedades CSS3.
Funcionamiento
Agrega el ToolTip. CSS a tu página HTML y listo.
<link href="tooltip.css" rel="stylesheet">
Crea una descripción básica con contenido personalizado usando el atributo ' Data-ToolTip ' como sigue:
<span data-tooltip="I’m a tooltip">Hover Me</span>
Anexar la información sobre herramientas a un elemento de bloque:
<span class="tooltip-wrapper" data-tooltip="I am a tooltip"> <img src="1.jpg"> </span>
.tooltip-wrapper {
display: inline-block;
border: 0 none !important;
} Aplicar temas predefinidos a las descripciones emergentes:
data-tooltip-theme="blue" data-tooltip-theme="green" data-tooltip-theme="orange" data-tooltip-theme="red"
Aplique sus propios estilos CSS a la información sobre herramientas.
data-tooltip-theme="custom"
.custom { ... }
