Author: | kazzkiq |
---|---|
Views Total: | 3,623 views |
Official Page: | Go to website |
Last Update: | July 1, 2020 |
License: | MIT |
Preview:

Description:
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