Before Tooltips, globo informativo usando css puro

min 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>.