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.

Bubblesee.bind('img');

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');