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)
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.
Open your qtip.js, search for the line below at approximately line #56.
sTitle = a.getAttribute("title");
if(sTitle)
{
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!//
You could just use a jQuery selector to target a specific css class like so:
$(‘.toolTip’).qtip