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 qrayg.com. By default, it automatically apply tooltip on all elements specify by you. (below)

?View Code JAVASCRIPT
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.

?View Code JAVASCRIPT
sTitle = a.getAttribute("title");
if(sTitle)
{

Then, replace the whole part above with this:

?View Code JAVASCRIPT
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

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

 

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


or Subscribe to specific category only :




  - 1 Comments


Thomas says:

You could just use a jQuery selector to target a specific css class like so:
$(‘.toolTip’).qtip

Leave a Reply

You must be logged in to post a comment.

Previous Post
«
Next Post
»