JQuery Create Simple Tooltip Plugin

JQuery Simple Tooltip Plugin

A few weeks ago, i have learned about JQuery Plugin Basic Concept. JQuery Plugin has the ability to set default option for multiple parameters. So, i’ll give you tutorial in how to create simple jquery tooltip plugin (actually my purpose is to ensure i’m not forget about this. hahaha..). The main concept is very very very simple, we’ll utilize HTML title tag not only for provide text tooltip but also use as the main selector.


The advantages in using JQuery Plugin Concept are :

  • Easy to use
  • Easy to change the parameter
  • Able to set blank default parameter (similar with optional argument)

THE HTML
This is the HTML file. Since this is an example, let try the simplest one.

THE CSS
Let we code the CSS of tooltip.

THE JAVASCRIPT
Ahaa… This is the best part. Lets code the plugin.

Then i can guess what’s in your head. How to use the plugin??

That’s very easy right? If u want to change the color, background color, allow moved or fixed, and animation duration. We can use the properties of this plugin like this.

We can use this plugin in image, text, link, button, and input field. This is only the example, if you want more functionality of this plugin, you can enhance it as easy as you want. 🙂

FatkhanFauzi About FatkhanFauzi

A passionate software engineer who wants to share anything that he learns and some of his life experiences. Want to know more about him? see Fatkhan Fauzi Profile


So, what do you think ?

Leave a Reply

%d bloggers like this: