Crear información de herramientas simple para elementos DOM usando Pure CSS/CSS3
| Autor: | robmclarty |
|---|---|
| Views Total: | 1,862 |
| Sitio oficial: | Ir a la web |
| Actualizado: | March 30, 2015 |
| Licencia: | MIT |
Vista prévia
Descripción
Un componente de información sobre herramientas CSS/CSS3 puro que le permite anexar burbujas emergentes a cualquier elemento DOM cuando pasa el ratón.
Admite texto de información sobre herramientas de varias líneas y cuatro direcciones. Escrito en LESS.
Funcionamiento
Incluya el ToolTip. CSS en el documento.
<link href="tooltip.css" rel="stylesheet">
Agregue la clase CSS ' ToolTip ' al elemento DOM donde desea mostrar una información sobre herramientas cuando el mouse pasa el ratón. Puede usar Data-ToolTip atributo para especificar el texto que se muestra en la información sobre herramientas.
<a href="" class="tooltip top" data-tooltip="Tooltip content">Hover me</a>
Para cambiar la dirección de la información sobre herramientas, simplemente agregue la clase CSS adecuada como sigue.
<a href="" class="tooltip top" data-tooltip="Tooltip content">Top</a> <a href="" class="tooltip bottom" data-tooltip="Tooltip content">Bottom</a> <a href="" class="tooltip left" data-tooltip="Tooltip content">Left</a> <a href="" class="tooltip right" data-tooltip="Tooltip content">Right</a>
