Información sobre herramientas interactivas personalizables en JavaScript puro-Tippy. js

Vista prévia

Descripción

Tippy. js es una pequeña pero muy personalizable biblioteca de información sobre herramientas de JavaScript que le ayuda a agregar información sobre herramientas interactivas, interactiva y animada a cualquier elemento DOM.

Características

• Soporta todas las posiciones: arriba, derecha, abajo a la izquierda
• Eventos de desencadenador personalizados: MouseEnter, foco, clic o manual.
• 4 animaciones sorprendentes incorporadas: desplazamiento, perspectiva, fundido o escala.
• 4 temas: Google, borde claro, luz y translúcido
• Permite incrustar cualquier marcado HTML dentro de la información sobre herramientas.
• Funciones de devolución de llamada útiles.

Install it via NPM:

$ npm install tippy

¿Cómo funciona?

Cargue los archivos JavaScript y CSS como se muestra a continuación en su documento HTML.

<link rel="stylesheet" href="css/tippy.css">
<script src="js/tippy.js"></script>

Agrega la clase ' Tippy ' a tu elemento y define el contenido de la información sobre herramientas usando el atributo ' title ' como este:

<span class="tippy" title="I'm a tooltip!">Hover Me</span>

Inicializar la biblioteca de información sobre herramientas mediante la creación de un nuevo objeto Tippy como este:

new Tippy('.tippy')

Configuración de la información sobre herramientas mediante las siguientes opciones. Tenga en cuenta que todas las opciones que se enumeran a continuación se pueden pasar a través de JavaScript:

new Tippy('.tippy', {


 placement: 'top',


livePlacement: true,


trigger: 'mouseenter focus',


animation: 'shift-away',


html: false,


animateFill: true,


arrow: false,


delay: 0,


duration: [350, 300],


interactive: false,


interactiveBorder: 2,


theme: 'dark',


size: 'regular',


distance: 10,


offset: 0,


hideOnClick: true,


multiple: false,


followCursor: false,


inertia: false,


updateDuration: 350,


sticky: false,


appendTo: function appendTo() {



return document.body;


},


zIndex: 9999,


touchHold: false,


performance: false,


dynamicTitle: false,


flip: true,


flipBehavior: 'flip',


arrowType: 'sharp',


arrowTransform: '',


maxWidth: '',


target: null,


allowTitleHTML: true,


popperOptions: {},


createPopperInstanceOnInit: false,
})

O a través de atributos HTML ' datos ':

<span class="tippy"



 title="I'm a tooltip!"



data-OPTION="VALUE">



Hover Me
</span>

Funciones de devolución de llamada disponibles:

new Tippy('.tippy', {



onShow: function onShow() {},

 onShown: function onShown() {},

 onHide: function onHide() {},

 onHidden: function onHidden() {}



})

API methods.

// show the tippy
instance.show([duration])

// hide the tippy
instance.hide([duration])

// enable the tippy
instance.enable()

// disable the tippy
instance.disable()

// destroy the tippy
instance.destroy()

Registro de cambios

v3.4.0 (01/12/2018)

• Siga las adiciones del cursor

v3.3.0 (12/08/2018)

• Agregue maxWidth a updatePopperElement
• Refactorizar el código en un módulo más sensato

v3.2.0 (11/18/2018)

• Utilice State. Ismontado sobre State. isVisible en Destroy ()

v3.1.1 (11/03/2018)

• Nuevos temas: ' luz-frontera ' y ' Google '

v3.1.0 (10/12/2018)

• Fix setContent () reseteo de la posición followCursor

v3.0.3 (09/29/2018)

• Bugfix

v3.0.1 (09/24/2018)

• Bugfix

v2.6.0 (09/08/2018)

• Bugfix

v2.5.4 (07/14/2018)

• Bugfix