Simple Animated Tooltip Library With Pure CSS – Balloon.css

Category: CSS & CSS3 , Recommended , Tooltip | July 1, 2020
Author:kazzkiq
Views Total:3,623 views
Official Page:Go to website
Last Update:July 1, 2020
License:MIT

Preview:

Simple Animated Tooltip Library With Pure CSS – Balloon.css

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

You Might Be Interested In:


Leave a Reply