Simple Method for Adding Tooltips

There is no shortage of plugins and techniques for adding tooltips to elements on your website.  I’ve used a lot of them, and most work pretty good.  However, I have found some to be a little cumbersome and bit of overkill.  Here’s an example of a very simple jQuery solution that I’ve used in a number of cases for selects and inputs.

Take for example the following HTML:

Which of course will render as:

With just a few lines of jQuery and a little CSS we can add a tooltip to each of these inputs that will open on hover.
jQuery:
 


CSS:


Now hover over the input and you’ll get the following:

How it works:

The jQuery simply binds the hover function to the inputs which creates the event listeners for mouseout and mouseover for each input.

On mouseover a span is added to the DOM after the target element.  Notice it uses the width and position of the target element to calculate the placement of the span.

On mouseout the span is located using the class as a selector and removed from the DOM.

The CSS can really be whatever you want for style purposes.  What is important is the position and z-index.  Depending on the makeup of the other elements on your page you’ll need the position set to absolute to enforce the location of the span that is created on hover.  And, I like to use a high z-index so that the help text will appear above any near by elements.

If you like this method and want to use it with more flexibility for positioning I created a plugin called Easytip.  You can find more information on the plugin and download it here.

Advertisements

About Shawn Sweeney

I'm a father, software developer, and runner. I blog about things related. View all posts by Shawn Sweeney

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: