Pure HTML5/CSS solución de información sobre herramientas
| Autor: | timothy0022000 |
|---|---|
| Views Total: | 5,133 |
| Sitio oficial: | Ir a la web |
| Actualizado: | July 13, 2015 |
| Licencia: | MIT |
Vista prévia
Descripción
Esta es una solución CSS más simple para crear información sobre herramientas personalizadas en cualquier elemento DOM usando el atributo de datos HTML5 y CSS:: antes de &:: After selectores.
Funcionamiento
Agregue una información sobre herramientas personalizada a un elemento mediante el atributo Data-Tip.
<span class="tool" data-tip="Hyper Text Makeup Language">HTML</span>
Los estilos CSS principales para la información sobre herramientas personalizada.
.tool {
cursor : help;
position : relative;
}
.tool::before, .tool::after {
position : absolute;
left : 50%;
opacity : 0;
z-index: -100;
}
.tool:hover::before, .tool:focus::before, .tool:hover::after, .tool:focus::after {
opacity : 1;
z-index: 100;
}
.tool::before {
border-style : solid;
border-width : 1em .75em 0 .75em;
border-color : #3e474f transparent transparent transparent;
bottom : 100%;
margin-left : -.5em;
content : " ";
}
.tool::after {
background : #3e474f;
border-radius : .25em;
bottom : 180%;
color : white;
width : 17.5em;
padding: 1em;
margin-left : -8.75em;
content : attr(data-tip);
}
