Extremely Lightweight jQuery Tootip Plugin that follow mouse cursor

If you want to add quick tooltip on any text or button then In this post I am going to share Extremely Lightweight jQuery Tootip Plugin that follow mouse cursor. It is super simple jQuery based CSS3 HTML5 tooltip plugin that always follows your mouse cursor, It is easy to use and customizable with own custom stylesheet.


jquery-tooltip

Integrate Extremely Lightweight jQuery Tootip Plugin

Libraries

Include latest jquery core library and just after add plugins library tooltip.js on page.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="tooltip.js"></script>

HTML

Add attribute data-tooltip to any element and pass tooltip text.

 <button data-tooltip="This is a tooltip">My button</button>



CSS

Then add your own custom CSS to customize tooltip look and feel as per your web page.

<style>
.div-tooltip {
   display:none; 
   position:absolute; 
   background-color:#000; 
   padding:10px; color:#fff; 
   font-size:12px Arial; 
}
</style>

See live demo and download source code.

DEMO | DOWNLOAD

Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.