Fancy CSS3 Animated Tooltip Library – Bubblesee

Category: Javascript , Tooltip | November 27, 2017
Views Total:186 views
Official Page:Go to website
Last Update:November 27, 2017


Fancy CSS3 Animated Tooltip Library – Bubblesee


Bubblesee is a vanilla JavaScript library that appends a fancy, animated, custom tooltip popup to any elements.

How to use it:

Include the main stylesheet in the web page that provides the basic styling and animations for the tooltips. Animation included:

  • Skew
  • Scale
  • rotate
  • toTop
<link href="src/styles.min.css" rel="stylesheet">

Insert the tooltip content to the ‘title’ attribute of your element.

<img src="1.jpg" title="Tooltip content here">

Enable the custom tooltip on the ‘img’ element on hover.


Change the default animation.

Bubblesee.bind('img', 'skew');
Bubblesee.bind('img', 'toTop');
Bubblesee.bind('img', 'scale');
Bubblesee.bind('img', 'rotate');

Add additional CSS classes to the tooltip.

Bubblesee.bind('img', 'skew', 'myClass');

You Might Be Interested In:

Leave a Reply