Simple Animated Tooltip Library With Pure CSS – Balloon.css

A simple, lightweight pure CSS library helps you create animated tooltip for any dom elements using html5 data attributes.

Features:

• Supports 4 directions: top, right, bottom and left
• Supports any html characters and even icon fonts.

How to use it:

Download and load the minified version of Balloon.css into the head section of your webpage.

<link href="balloon.min.css" rel="stylesheet">

Add a top tooltip to a given element as follows:

• data-balloon: specifies the content displayed in the tooltip.
• data-balloon-pos=”up”: specifies the tooltip direction. Accept values: ‘up’, ‘right’, ‘down’ and ‘left’.

<div class="box" 
     data-balloon="Top Tooltip" 
     data-balloon-pos="up">

Change the size of your tooltip using data-balloon-length attribute. Accept values: ‘small’, ‘medium’, ‘large’, ‘xlarge’ or ‘fit’.

<div class="box" 
     data-balloon="I'm a xlarge tooltip" 
     data-balloon-pos="down" 
     data-balloon-length="xlarge">

Changelog:

v1.2.0 (07/01/2020)

• Update

v1.1.0 (06/05/2020)

• Updating minor version to reflect the new SASS variable $balloon-text-color enchancement

v1.0.3 (07/23/2019)

• Breaks other [aria-label]::before hovers

v1.0.2 (07/13/2019)

• Bugfixed

v1.0.1 (07/04/2019)

• Fixed Balloon is appearing in all aria-label tags

06/15/2019

• Remove !important from balloon.css

v0.5.2 (06/12/2019)

• Fixing FontAwesome

01/29/2018

• Bugfix

08/13/2018

• Bugfix