Pequeñas informaciones sobre herramientas HTML5 animadas con CSS puro-Tippy. CSS

Vista prévia

Descripción

Sólo otra biblioteca CSS para crear información sobre herramientas animadas en sus elementos DOM utilizando sólo los atributos de datos CSS/CSS3 y HTML5. Sin ninguna 3ª dependencia.

Funcionamiento

Sólo tiene que colocar el archivo Tippy. CSS en la sección Head de la página web y estamos listos para ir.

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

Agregue contenido de información sobre herramientas personalizado a su elemento utilizando el atributo ' Data-Tippy ':

<button data-tippy="I am a tooltip!" class="btn btn-danger">Button Example</button>
<a href="http://www.google.com" data-tippy="Link to Google">Link example</a>
<span data-tippy="Hello world">Inline element example</span>

Ajuste la posición de la información sobre herramientas utilizando el atributo ' Data-Tippy-pos ':

<button data-tippy="I am a tooltip!"




 data-tippy-pos="top">




Button Example
</button>

<button data-tippy="I am a tooltip!"




 data-tippy-pos="right">




Button Example
</button>

<button data-tippy="I am a tooltip!"




 data-tippy-pos="botom">




Button Example
</button>

<button data-tippy="I am a tooltip!"




 data-tippy-pos="left">




Button Example
</button>

Agregue animaciones CSS3 personalizadas a las descripciones emergentes. La librería CSS viene actualmente con 2 animaciones: ' Slide ' y ' Bubble '.

<button data-tippy="I am a tooltip!"




 data-tippy-pos="top"




data-tippy-animate="slide">




Button Example
</button>

<button data-tippy="I am a tooltip!"




 data-tippy-pos="right"




data-tippy-animate="bubble">




Button Example
</button>