Code: qTip

Update: (02-12-2008) Multi-tag support has been added. Thanks go out to James Crooke for his lightweight code additions.

For the past few years I’ve been trying to perfect a technique of turning the title attribute into customizable, floating DIV’s. I’ve always known about NiceTitles and NicerTitles but there was something about those techniques that just didn’t jive with me (only works with <a> tags, browser’s default title display still appears and overlaps or interferes with the pop up, extreme bloat, etc).

So I developed my own technique, and I call it qTip:

qTip Example Page

Features:

  • Only 2K
  • Removes title attribute on mouse over to eliminate overlaps
  • Parses HTML in the titles
  • Bloat free. It does what it says and nothing more
  • Tested and works in IE 5.5+, Firefox, Safari, Opera

Configuration:

Open the qTip example page and download the qTip.js file. Edit the qTip.js file and modify the 3 lines near the top of the document. There are comments after each line that explain what each variable controls. It’s very intuitive but here’s a quick run down:

  • qTipTag = the tags that you want to qTip-ize. Make sure to keep these variables lowercase and separate by a comma. It’s a good idea to choose tags that you use on your website and already have title attributes applied. If you use a CMS like TXP then the <a> tag is a good choice.
  • qTipX = change this number to move the generated pop up DIV along the x axis. This number can be positive or negative.
  • qTipY = change this number to move the generated pop up DIV along the y axis. This number can be positive or negative.

Installation:

Upload the qTip.js file somewhere on your server. In the <head> tag of your web page use the following code making sure to change the src value so that it points to the correct location:

  1. <script language="JavaScript" src="qTip.js" type="text/JavaScript"></script>

Customization:

Now all we have to do is add a single rule to our CSS file. Here’s a simple example that will get you started:

  1. div#qTip {
  2. padding: 3px;
  3. border: 1px solid #666;
  4. display: none;
  5. background: #999;
  6. color: #FFF;
  7. font: bold 9px Verdana, Arial, sans-serif;
  8. position: absolute;
  9. z-index: 1000;
  10. }

You can modify this code to your liking.

Other Stuff

Be aware that I am not a JavaScript guru and this library could definitely be improved upon. Please feel free to modify it to your liking and clean it up if you feel that it could be optimized. All I ask is that you keep the credits at the top.

Edit (11-05-2008): Also, please DO NOT contact me with support issues. This script is offered “as is”. It is not a bloated “be all end all” tip solution. The goal of this script is to offer a simple as-small-as-possible tip solution. Bloated feature requests will be ignored from now on.

qTip Example Page


Recent Blog

  • No More

Recent Code

  • Nore more

RSS

©1992-2014 qrayg.com | all rights reserved.