Biblioteca de información sobre herramientas ligera habilitada para AJAX-drooltip. js
| Autor: | prevwong |
|---|---|
| Views Total: | 1,911 |
| Sitio oficial: | Ir a la web |
| Actualizado: | September 23, 2018 |
| Licencia: | MIT |
Vista prévia
Descripción
drooltip. js es un complemento de información sobre herramientas de JavaScript rico en características que se utiliza para crear información sobre herramientas personalizables y dinámicas a partir de cualquier contenido (por ejemplo, texto, HTML, JSON, contenido Ajax, etc.). El plugin viene con 4 animaciones: BOUNCE, FADE, MATERIAL y FLOAT. También tiene la capacidad de volver a posicionarse de acuerdo con la pantalla disponible.
¿Cómo funciona?
En primer lugar es necesario cargar el JavaScript drooltip. js y StyleSheet drooltip. CSS en el documento.
<link rel="stylesheet" src="/path/to/drooltip.css"> <script src="/path/to/drooltip.js"></script>
A continuación, defina su propio contenido que se muestra en la información sobre herramientas utilizando el atributo ' title ' como este:
<span class="demo" title="Tooltip"> Hover Me </span>
El último paso es inicializar el complemento en el elemento ' span '.
var tooltip = new Drooltip({"element" : ".demo"}); Personalice la información de herramientas según sus necesidades.
var tooltip = new Drooltip({
// target element
"element" : ".demo",
// custom trigger event
"trigger" : "hover",
// where to position the tooltip
"position" : "top",
// background color
"background" : "#2175ff",
// text color
"color" : "#fff",
// or fade, float, material
"animation": "bounce",
// tooltip content
"content" : null,
// callback function
"callback" : null
}); Api.
// Animate all tooltips tooltip.animateAllTooltips() // Deanimate all tooltips tooltip.deanimateAllTooltips() // Animate an individual tooltip tooltip.animateTooltip(data) // Deanimate an individual tooltip tooltip.deanimateTooltip(data) // Show all tooltips tooltip.showAllTooltips() // Hide all tooltips tooltip.hideAllTooltips() // Show a specific tooltip tooltip.showTooltip(tooltip) // Hide a specific tooltip tooltip.hideTooltip(tooltip) // Animate the tooltip with an included effect tooltip.addStandardEffect(tooltip, effect) // Denimate the tooltip with an included effect tooltip.removeStandardEffect(tooltip, effect) // Show the tip arrow of a tooltip tooltip.showArrow(tooltip) // Hide the tip arrow of a tooltip tooltip.hideArrow(tooltip) // Intelligently update the position of a tooltip relative to its target element tooltip.updatePosition(data)
Registro de cambios
v1.0.2 (09/23/2018)
- Agregado soporte para navegadores compatibles con IE-11/non-ES6
