Fancy CSS3 Animated Tooltip Library – Bubblesee

Category: Javascript , tooltip | November 27, 2017
Author:viclafouch
Views Total:171 views
Official Page:Go to website
Last Update:November 27, 2017
License:MIT

Preview:

Fancy CSS3 Animated Tooltip Library – Bubblesee

Description:

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

You Might Be Interested In:


Leave a Reply