Super simple animado HTML5 & CSS3 ToolTip
| Autor: | designcouch |
|---|---|
| Views Total: | 3,789 |
| Sitio oficial: | Ir a la web |
| Actualizado: | July 20, 2014 |
| Licencia: | MIT |
Vista prévia
Descripción
Una sencilla información de herramientas de CSS3 animada que muestra el contenido de HTML5 Data-Description atributo de cualquier elemento HTML.
Funcionamiento
Cree un elemento HTML con un identificador único ' ToolTip ' y use Data-Description atributo para declarar el contenido de la información sobre herramientas.
<div id="tooltip" data-description="I'm a tooltip"> I have a tooltip. </div>
El CSS necesario para el estilo & animar la información sobre herramientas.
#tooltip {
width: 350px;
font-family: Helvetica, Arial, sans-serif;
font-weight: 100;
font-size: 20px;
text-align: center;
padding: 50px;
margin: 100px auto;
background: white;
position: relative;
border-radius: 5px;
box-shadow: 10px 10px 0px rgba(0,0,0,.05);
}
#tooltip:before {
content: attr(data-description);
box-sizing: border-box;
display: block;
background: rgba(0,0,0,.7);
color: white;
padding: 20px;
position: absolute;
left: 50%;
top: -30px;
margin-left: -100px;
width: 200px;
height: 65px;
line-height: 25px;
border-radius: 5px;
opacity: 0;
transition: .25s ease-in-out;
}
#tooltip:after {
content: '';
display: block;
position: absolute;
top: 35px;
left: 50%;
margin-left: -8px;
height: 0;
width: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid rgba(0,0,0,.7);
transition: .25s ease-in-out;
opacity: 0;
}
#tooltip:hover:before {
opacity: 1;
top: -50px;
}
#tooltip:hover:after {
opacity: 1;
top: 15px;
}
