Modifying qTip To Show Tooltip Only On A Specific CSS Class

Posted in Web Development on 23 August 2009 1 comment

qTip is a light-weight javascript tooltip script written by By default, it automatically apply tooltip on all elements specify by you. (below)

var qTipTag = "a,img"; //Which tag do you want to qTip-ize? Keep it lowercase!//

In most cases, however, you don’t want to show tooltip on all elements. For example, my WordPress Theme Demo Bar plugin uses qTip and of course I don’t want tooltips on all <a> tags.

You can make qTip to show tooltip only on a specific CSS class by some simple edits.

Simple Edit to the qtip.js file

Open your qtip.js, search for the line below at approximately line #56.

sTitle = a.getAttribute("title");

Then, replace the whole part above with this:

sTitle = a.getAttribute("title");		
sClassName = a.getAttribute("class");				
if(sTitle && sClassName == 'qtip_tooltip')

In short,
- sClassName = a.getAttribute(“class”); was added below the “sTitle….” line.
- && sClassName == ‘qtip_tooltip’ was added to the if-statement.

Now replace the “qtip_tooltip” with your desired css class name. Add css class to your element and that’s it.

NOTE: Don’t forget to add the element to

var qTipTag = "a,img"; //Which tag do you want to qTip-ize? Keep it lowercase!//


Posted by Zen on 23 August 2009 • 4,525 visits 1 comment
Tags : ,

or Subscribe to specific category only :


Thomas says:

You could just use a jQuery selector to target a specific css class like so:

Leave a Reply

Please note: Comment moderation is enabled and may delay your comment. There is no need to resubmit your comment.

Previous Post
Next Post