Beautiful Easy-to-use Tooltip JavaScript Library – Custom Tooltips

Tooltips are useful and beautiful user interface components that provide additional information on hover.

This lightweight and beautiful tooltip JavaScript library is easy to use, extend and customize to your needs. All it does is bind an element to an event (mouseover) and show a small tooltip using the data-tooltip attribute.

How to use it:

1. Load the stylesheet CustomTooltips.min.css and JavaScript CustomTooltips.min.js in the document.

<link href="src/CustomTooltips.min.css" rel="stylesheet" />
<script src="src/CustomTooltips.min.js"></script>

2. Insert your tooltip content into the data-tooltip attribute. That’s it.

<span data-tooltip="Hover Me">
  Hover Me
</span>