Información de herramienta adaptable mínima con JavaScript y CSS
| Autor: | arshdkhn |
|---|---|
| Views Total: | 3,905 |
| Sitio oficial: | Ir a la web |
| Actualizado: | December 10, 2016 |
| Licencia: | MIT |
Vista prévia
Descripción
Una información de herramientas con estilo CSS minimalista y adaptable que auto re-posiciona automáticamente si no hay suficiente espacio en el lado derecho o izquierdo de la ventanilla.
Funcionamiento
Agregue el atributo REL = "ToolTip" al elemento de destino y defina el contenido de la información sobre herramientas mediante atributo de de título. También puede especificar las direcciones utilizando clases CSS como se muestra a continuación:
<span class="top" rel="tooltip" title="tooltip content">Tooltip</span> <span class="bottom" rel="tooltip" title="tooltip content">Tooltip</span> <span class="left" rel="tooltip" title="tooltip content">Tooltip</span> <span class="right" rel="tooltip" title="tooltip content">Tooltip</span>
Estilo de las descripciones emergentes con las siguientes reglas CSS.
#tooltip {
text-align: center;
color: #fff;
background: #333;
position: absolute;
z-index: 10000;
padding: 10px;
border-radius: 5px;
-webkit-transition: 100ms ease;
-moz-transition: 100ms ease;
-o-transition: 100ms ease;
-ms-transition: 100ms ease;
transition: 100ms ease;
}
#tooltip:after /* triangle decoration */ {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #333;
content: '';
position: absolute;
left: 50%;
bottom: -10px;
margin-left: -10px;
}
#tooltip.top:after {
border-top-color: transparent;
border-bottom: 10px solid #111;
top: -20px;
bottom: auto;
}
#tooltip.left:after {
left: 10px;
margin: 0;
}
#tooltip.right:after {
right: 10px;
left: auto;
margin: 0;
} El principal JavaScript para activar la información sobre herramientas. Sólo tiene que incluir el siguiente archivo JS en la parte inferior de la página web y listo.
<script src="js/index.js"></script>
