Breaking

Post Top Ad

Your Ad Spot

miércoles, 14 de agosto de 2019

Before Tooltips, globo informativo usando css puro

Before Tooltips

Demostración Descargar Repositorio Star 

—Versión actual 2.0.0

Por fin está aquí, la nueva versión de before-tooltips, la cual incluye un cambio de sintaxis, animaciones y mejora en la compatibilidad. Debido a su nueva sintaxis, técnicamente tengo que volver a escribir esta entrada aunque espero que les sea sencillo adaptarse a esta nueva versión.

Instalación

Descargar el zip que contiene los archivos de Before Tooltips e incluir arriba de </head> el código css de la siguiente forma:

<link rel="stylesheet" href="btips.min.css"/>

O puedes usar rawgit como cdn:

<link rel="stylesheet" href="https://cdn.rawgit.com/zkreations/Before-Tooltips/master/dist/btips.min.css"/>

Puedes usar before tooltips con cualquier etiqueta, solo necesitas agregar la class btips y el contenido del globo informativo será extraído del atributo data-title, en este ejemplo utilice un enlace.

<a class="btips" data-title="Solo soy un tooltip" href="#url">Hola mundo</a>

Cambiar orientación

Por defecto, Before Tooltips siempre se muestra arriba del objeto. Para cambiar la orientación se agrega el atributo data-btips y dentro se especifica la orientación::

  • Arriba (predeterminado): <a class="btips"></a>
  • Abajo: <a class="btips" data-btips="bottom"></a>
  • Izquierda: <a class="btips" data-btips="left"></a>
  • Derecha: <a class="btips" data-btips="right"></a>

Animaciones

Por defecto Before Tooltips no muestra ninguna animacion, todas las animaciones se agregan a partir de un doble guion, puedes elegir entre las siguientes:

  • Default: <a class="btips"></a>
  • Fade: <a class="btips--fade"></a>
  • Slide In: <a class="btips--slide-in"></a>
  • Slide Out: <a class="btips--slide-out"></a>
  • Bounce In: <a class="btips--bounce-in"></a>
  • Bounce Out: <a class="btips--bounce-out"></a>

Limitaciones

No funciona con etiquetas de auto cierre, como por ejemplo <img/> o <input/>. Pero estas etiquetas pueden ser encerrada, y su contenedor puede hacer uso de Before Tooltips de la siguiente manera: <a class="btips"><img/></a>.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas