clueTip : A jQuery Plugin

Note: This version of the clueTip plugin is no longer being supported. Please visit the clueTip project page for the most recent version. Also, the demo page has been moved.

This is a demo page for the new clueTip — a jQuery-based, AJAX-powered tooltip developed by Karl Swedberg. The clueTip plug-in was inspired by Cody Lindley's jTip script. Many feature ideas were provided by Shelane Enos. Glen Lipka and Jörn Zaefferer provided expert advice. Jonathan Chaffer helped a lot, but eschewed the co-author designation out of sheer modesty.

This page uses the jTip style for the clueTips.

Features

The clueTip plug-in allows you to easily set a link to show a "tooltip" of sorts when the user's mouse hovers over the link. If the link includes a title attribute, its text becomes the heading of the clueTip. The contents of the clueTip can come from one of these sources:

  1. a separate file, via AJAX
  2. an element on the same page, typically hidden
  3. the title attribute, parsed by a user-defined delimiter (if the "splitTitle" option is set). The text before the first delimiter becomes the clueTip title, and the rest of the text parts are placed in <div class="split-body"></div> elements and appended to the clueTip body

The clueTip offers smart positioning:

The clueTip takes advantage of Brian Cherne's fantastic hoverIntent plugin if it's available. (Just include it in a <script> tag if you want the clueTip to use it.)

The clueTip comes with the following options:

Setup

To use the plug-in, you'll need to include 4 JavaScript files in your web page's <head>, like so: 

    <script src="scripts/jquery.js" type="text/javascript"></script>
    <script src="scripts/jquery.dimensions.js" type="text/javascript"></script>
    <script src="scripts/jquery.cluetip.js" type="text/javascript"></script>
    <script src="scripts/your-custom-file.js" type="text/javascript"></script>

As you can see, the clueTip depends on jquery.js and jquery.dimensions.js to function properly.

If you would like to use clueTip in conjunction with the hoverIntent plugin, you will need to reference that plugin as well.

Examples

Here are some examples of how you can add a clueTip to your page. Note that since all of the clueTips here use the alternate "jTip" style, they all have at least two options set, arrows: true and dropShadow: false. If you know you're always going to use the jTip style, you can change these options in jquery.cluetip.js instead:

  1. basic, empty title: $('a.basic').cluetip({arrows: true, dropShadow: false});. This is the simplest example there is: <a class="basic" href="ajax.htm" rel="ajax.htm">
  2. custom width and title: $('a.custom-width').cluetip({width: '200px', arrows: true, dropShadow: false}); This tip has a custom width and title: <a class="custom-width" href="ajax3.htm" title="Fancy Title!" rel="ajax3.htm">
  3. non-link element, custom attribute: $('h4').cluetip({attribute: 'id', hoverClass: 'highlight', arrows: true, dropShadow: false});

    <h4 id="ajax3.htm">Hover over me</h4>

  4. sticky: $('#sticky').cluetip({sticky: true, arrows: true, dropShadow: false}); This is a sticky clueTip: <a id="sticky" href="ajax6.htm" rel="ajax6.htm">. It won't close until you close it. Or until you hover over another clue-tipped link.
  5. local: $('a.load-local').cluetip({local:true, arrows: true, dropShadow: false}); This one uses local content from a hidden div element: <a class="load-local" href="#loadme" rel="#loadme">
  6. sticky, truncated clueTip with custom hover class, close position, and close text (it also has a title): 
    $('#examples a:eq(4)').cluetip({
  hoverClass: 'highlight',
  sticky: true,
  closePosition: 'bottom',
  closeText: '<img src="styles/cross.png" alt="" />'
  truncate: 60, 
  arrows: true, 
  dropShadow: false
});
    If you click this link — <a href="http://www.learningjquery.com" title="about this link:" rel="ajax6.htm"> — you'll be directed to learningjquery.com
  7. new! click to activate: $('#clickme').cluetip({activation: 'click', arrows: true, dropShadow: false}); This one won't show the clueTip unless you click it <a href="ajax5.htm" rel="ajax5.htm" title="active ingredients">

Alternate "jTip" Styles

You can style your clueTips any way you want. Here are the alternate styles that mimic Cody Lindley's jTip plugin: 

    
.clue-right {
  background-image: url(arrowleft.gif);
  background-repeat: no-repeat;
  padding-left: 10px;
}
.clue-left {
  background-image: url(arrowright.gif);
  background-repeat: no-repeat;
  padding-right: 10px;
}

#cluetip-outer {
  border: 2px solid #ccc;
  position: relative;
  background: #fff;
}

h3#cluetip-title {
  margin: 0 0 5px;
  padding: 2px 5px;
  font-size: 16px;
  font-weight: normal;
  background-color: #ccc;
  color: #333;
}

span#cluetip-close { 
  text-align: right;
  margin: 0 5px 5px;
  color: #900;
}
#cluetip-close img {
  border: 0;
}

this is the local content to load when the 'local' parameter is set to true. Currently it only works with an id selector.

Known Issues and To Do

Here is a list of bugs and features I've been working on:

Downloads

ClueTip

Dependencies