Información sobre herramientas ligeras y limpias con animaciones CSS3-html5tooltips. js

Vista prévia

Descripción

html5tooltips. js es una potente biblioteca de JavaScript que adjunta la información de herramientas animadas y CSS3 que contiene cualquier contenido HTML a un elemento DOM especificado.

Funcionamiento

Incluya el html5tooltips. CSS para los estilos básicos de información sobre herramientas.

<link rel="stylesheet" href="html5tooltips.css">

Incluya el html5tooltips. Animation. CSS para las animaciones CSS3.

<link rel="stylesheet" href="html5tooltips.animation.css">

Incluya el núcleo JavaScript en la Página Web.

<script src="html5tooltips.js"></script>

Agregue una información de herramientas básica a un elemento específico mediante el atributo Data-ToolTip.

<span Data-ToolTip="Refresh"></span>

Agregue una información sobre herramientas personalizada a un elemento específico mediante el método JavaScript.

html5tooltips([

{


contentText: "Tooltip Text",


contentMore: "More Tooltip Text",


targetSelector: "#el",


stickTo: "top"

}
]);

Opciones de personalización completas.

html5tooltips([

{



// animation duration in milliseconds


animateDuration: 300,



// fadein, foldin, foldout, roll, scalein, slidein, spin


animateFunction: "fadeIn",



 // daffodil, daisy, mustard, citrus-zest, pumpkin, tangerine, salmon, persimmon, rouge, scarlet, hot-pink, princess, petal, lilac, lavender, violet, cloud, dream, gulf, turquoise, indigo, navy, sea-foam, teal, peacock, ceadon, olive, bamboo, grass, kelly, forrest, chocolate, terra-cotta, camel, linen, stone, smoke, steel, slate, charcoal, black, white, metalic-silver, metalic-gold, metalic-copper; or any CSS color.


color: null,



// delay in milliseconds


delay: 500,


hideDelay: 300,



// custom text for tooltip


contentText: "",



// more text for tooltip


contentMore: "",



// disable animation


disableAnimation: false,



// if set to true, the tooltip will wait for hideDelay number of milliseconds before hide


persistent: false,





// bottom, left, right, top


stickTo: "bottom",



 // offset in pixels


stickDistance: 10,





// used to catch a target element in the document


targetSelector: "",





// max with in pixels


maxWidth: null


}
]);

También puede pasar las opciones a través de atributos de datos HTML:

• Data-ToolTip
• Data-ToolTip-animate-function
• Data-ToolTip-disable-animation
• Data-ToolTip-color
• Data-ToolTip-more
• Data-ToolTip-delay
• Data-ToolTip-stickto
• Data-ToolTip-maxwidth
• Data-ToolTip-hide-delay
• Data-ToolTip-persistent

Registro de cambios

v1.7.3 (2018-07-30)

• Actualice & más opciones