Biblioteca de información sobre herramientas CSS de animación mínima-micropunta
| Autor: | ghosh |
|---|---|
| Views Total: | 1,465 |
| Sitio oficial: | Ir a la web |
| Actualizado: | May 18, 2017 |
| Licencia: | MIT |
Vista prévia
Descripción
MicroTip. CSS es una biblioteca de HTML5/CSS ligera que se usa para crear descripciones emergentes de CSS3 animadas mínimas y elegantes anexando a cualquier elemento DOM dentro del documento.
Install the microtip:
# Yarn yarn add microtip # NPM $ npm install microtip
Funcionamiento
Importe la versión minimizada del micropunta en la Página Web.
<link href="microtip.min.css" rel="stylesheet">
Cree sus propias descripciones emergentes para cualquier elemento utilizando los siguientes atributos de de datos :
- Data-MicroTip: contenido de información sobre herramientas
- Data-MicroTip-posición: arriba, arriba-izquierda, arriba-derecha, abajo, abajo-izquierda, abajo-derecha, izquierda y derecha
- Data-MicroTip-tamaño: pequeño, mediano, grande y ajuste
<span data-microtip="Top Left Tooltip!" data-microtip-position="top-left" >Top Left</span> <span data-microtip="Large Tooltip!" data-microtip-position="top-right" data-microtip-size="large">
Personaliza las animaciones y apariencias de la información de herramientas a través de variables CSS:
:root {
--microtip-transition-duration: 0.18s;
--microtip-transition-delay: 0s;
--microtip-transition-easing: ease-in-out;
--microtip-font-size: 13px;
--microtip-font-weight: normal;
--microtip-text-transform: none;
}
