Fácil HTML5 ToolTip biblioteca JavaScript-información sobre herramientas
| Autor: | JavRok |
|---|---|
| Views Total: | 3,786 |
| Sitio oficial: | Ir a la web |
| Actualizado: | July 4, 2018 |
| Licencia: | MIT |
Vista prévia
Descripción
Tooltips es un módulo RequireJS utilizado para mostrar información sobre herramientas en cualquier elemento HTML usando HTML5 atributo de datos y JavaScript puro.
Funcionamiento
Incluya el ToolTip. CSS en el encabezado de los estilos de información sobre herramientas.
<link rel="stylesheet" href="tooltip.css">
Incluya el require. js en la parte inferior de la página.
<script src=tooltip.js"></script>
Mostrar una información sobre herramientas en el mouse. El texto se extrae del atributo title si no se establece en config.
<div class="box" data-tooltip title="Tooltip content"> Tooltip on hover </div>
Muestra una información sobre herramientas al hacer clic. La configuración de la información sobre herramientas se puede establecer mediante el atributo HTML Data-ToolTip (no-JS).
<div class="box" data-tooltip='{"showOn":"click", "orientation":"bottom"}' title="Tooltip content">
Tooltip on click
</div> También puede adjuntar la información sobre herramientas a un elemento mediante JavaScript:
<div class="box" id="example" title="Tooltip here"> Tooltip with JS </div>
Tooltip.create(
document.getElementById('example'),
{
// options here
}
); Todas las opciones posibles con valores predeterminados.
{
// 'top', 'bottom', 'left', 'right'
position
: 'auto',
// CSS class
class
: 'darkgrey',
// element CLASS
elementClass: '',
// 'top', 'bottom', 'left', 'right'
orientation : 'top',
// offset in pixels
offset
: 0,
// trigger event
showOn
: 'hover',
// custom close icon
closeIcon
: false,
// default tooltip text
text
: 'This tooltip text must be set with title or data-tooltip attribute'
} Registro de cambios
07/04/2018
- El código refactoriza
