Facebook estilo ToolTip biblioteca JavaScript-Tipsy Native

Vista prévia

Descripción

Tipsy Native es una biblioteca nativa de JavaScript para generar información sobre herramientas personalizables, como Facebook, a partir del atributo title del elemento.

Características

• Permite actualizar dinámicamente el texto de información sobre herramientas.
• Eventos de desencadenador personalizados: haga clic, mantenga el puntero, enfoque y así sucesivamente.
• Animaciones personalizadas.
• Reserva personalizada cuando no hay ningún atributo title proporcionado.
• El texto de información sobre herramientas se puede basar en cualquier atributo, no solo en title.
• Soporta contenido HTML.

Funcionamiento

Incluya la hoja de estilos y los archivos JavaScript de Tipsy Native en la Página Web.

<link href="/path/to/tipsy.css" rel="stylesheet">
<script src="/path/to/tipsy.js"></script>

Enlazar el Tipsy Native a un elemento especificado.

Tipsy.bindSelector('#example-1');

Vincule el Tipsy Native a todos los enlaces de anclaje que tienen el atributo ' rel = Tipsy '.

Tipsy.watchSelector('a[rel=tipsy]');

Especifique la dirección.

// nw | n | ne | w | e | sw | s | se
Tipsy.bind(document.querySelector('#example-2'), {gravity: 'nw'});

Config la animación de fundido y los tiempos de retardo.

Tipsy.bind(document.querySelector('#example-3'), {

fade: true

delayIn: 500,

 delayOut: 100
});

Todas las opciones de configuración con valores predeterminados.

Tipsy.bind(document.querySelector('#example-1'), {


// delay before hiding tooltip (ms)

delayOut: 0,




 // fade tooltips in/out?

fade: false,




 // fallback text to use when no tooltip text

fallback: '',




// gravity

gravity: 'n',




// is tooltip content HTML?

html: false,




 // pixel offset of tooltip from element

offset: 0,





 // opacity of tooltip

opacity: 0.8,




// attribute/callback containing tooltip text

title: 'title',



// how tooltip is triggered

// hover | focus | manual

trigger: 'hover'


 });

API Methods.

// show the tooltip
document.querySelector('#example-1').tipsy.show();

// hide the tooltip
document.querySelector('#example-1').tipsy.hide();

Registro de cambios

08/14/2018

• Solucionado el problema con className