toggle

Before Tooltips, globo informativo usando css puro

min Before Tooltips
Demostración Descargar Repositorio

—Versión actual 1.00

Después de un largo tiempo sin aportar, he comenzado a desarrollar muchas cosas (entre ellas muchas plantillas) para llenar la página de contenido. En esta ocacion les presento Before Tooltips, un globo informativo impulsado sólo mediante css, pero con la comodidad que te brinda uno desarrollado en javascript.


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="btooltips.min.css"/>

Para utilizar los Tooltips podemos crear un enlace con la class btips y el contenido del globo informativo será extraído del atributo title.


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

Para usar cualquier otra etiqueta lo único que cambia es el atributo, ya que en lugar de usar title se requiere de data-title


<span class="btips" data-title="Solo soy un tooltip">Hola mundo</span>

Cambiar orientacion

Por defecto, Before Tooltips siempre se muestra arriba del objeto. Para cambiar la orientación se agrega la class L, R o B:


  • Arriba (predeterminado): <a class="btips"></a>
  • Abajo: <a class="btips b"></a>
  • Izquierda: <a class="btips l"></a>
  • Derecha: <a class="btips r"></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>.