clueTip : A jQuery Plugin

This is a demo page for the new clueTip — a jQuery-based, AJAX-powered tooltip developed by Karl Swedberg.

Read the blog entries for Beta 1 and Beta 2 for more information and examples.

This version (0.8) includes some fairly major API changes, so if you're upgrading from a previous version, be sure to check out the inline documentation.

Credits

If you like this plugin and you're feeling generous, perhaps you'd also like to visit my amazon.com wish list?

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.

Multiple Content Sources

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

Smart Positioning

Flexible Behavior

Many, Many Options

Here is a list of the available. None of these are required.

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.

You should also include the stylesheet:

  <link rel="stylesheet" href="jquery.cluetip.css" type="text/css" />

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:

Default Style

  1. basic, no title attribute: This is the simplest example there is.
    View the HTML
    <a class="basic" href="ajax.htm" rel="ajax.htm">
    View the jQuery
    $('a.basic').cluetip();
  2. custom width and hidden title bar: This tip has a custom width of 200px. The clueTip title bar is hidden. Try me!
    View the HTML
    <a class="custom-width" href="ajax3.htm" rel="ajax3.htm">
    View the jQuery
    $('a.custom-width').cluetip({width: '200px', showTitle: false});
  3. non-link element, custom attribute, and hover class: Block-level items such as this h4 have clueTips positioned by the mouse.

    Hover over me.

    View the HTML
    <h4 title="Fancy Title!" id="ajax3.htm">Hover over me</h4>
    View the jQuery
    $('h4').cluetip({attribute: 'id', hoverClass: 'highlight'});
  4. sticky:This is a sticky clueTip: It won't close until you close it. Or until you hover over another clue-tipped link.
    View the HTML
    <a id="sticky" href="ajax6.htm" rel="ajax6.htm">
    View the jQuery
    $('#sticky').cluetip({sticky: true});
  5. local: This one uses local content from a hidden div element: hover for local
    View the HTML
    <a class="load-local" href="#loadme" rel="#loadme">
    View the jQuery
    $('a.load-local').cluetip({local:true, cursor: 'pointer'});
  6. sticky, truncated clueTip with custom hover class, close position, and close text (it also has a title). Its href is different from its rel, so if you click it, you'll go to the linked page hover for cluetip, click to visit URL
    View the HTML
    <a href="http://www.learningjquery.com" title="about this link:" rel="ajax6.htm">
    View the jQuery
    $('#examples a:eq(4)').cluetip({
      hoverClass: 'highlight',
      sticky: true,
      closePosition: 'bottom',
      closeText: '<img src="styles/cross.png" alt="" />'
      truncate: 60
    });
  7. click to activate: This one won't show the clueTip unless you click it: click me
    View the HTML
    <a href="ajaxclick.htm" rel="ajax5.htm" title="active ingredients">
    View the jQuery
    $('#clickme').cluetip({activation: 'click'});

jTip Theme

  1. jTip Style clueTip. Here is the code for this one:
    View the HTML
    < class="jt" href="ajax5.htm" rel="ajaxclick.htm" title="jTip Style!">
    View the jQuery
    $('.jt').cluetip({cluetipClass: 'jtip', arrows: true, dropShadow: false,
      fx: {
        open: 'slideDown', 
        openSpeed: 'slow'
      }
    });
    
  2. look for the link floated right: jTip Style clueTip
    View the HTML
    <a class="jt" href="ajax6.htm" rel="ajax6.htm">
    View the jQuery
    $('.jt').cluetip({cluetipClass: 'jtip', arrows: true, dropShadow: false,
      fx: {
        open: 'slideDown', 
        openSpeed: 'slow'
      }
    });
    

Rounded Corners Theme

  1. Rounded Corners Style clueTip. Here is the code for this one:
    View the HTML
    <a href="ajax4.htm" rel="ajax4.htm" title="rounded corners">
    View the jQuery
    $('ol.rounded a').cluetip({cluetipClass: 'rounded', dropShadow: false});

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

Default

You can style your clueTips any way you want. Here are the three "themes" that come bundled with the plugin:

/***************************************
* Default
    cluetipClass: 'default' 
-------------------------------------- */

.cluetip-default {
  background: #d9d9c2;
}
.cluetip-default #cluetip-outer {
  position: relative;
  margin: 0;
  background: #d9d9c2;
}
.cluetip-default h3#cluetip-title {
  margin: 0 0 5px;
  padding: 8px 10px 4px;
  font-size: 1.1em;
  font-weight: normal;
  background-color: #87876a;
  color: #fff;
}
.cluetip-default #cluetip-inner {
  padding: 10px;
}
.cluetip-default span#cluetip-close { 
  text-align: right;
  margin: 0 5px 5px;
  color: #900;
}

/***************************************
* jTip
    cluetipClass: 'jtip'
-------------------------------------- */

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

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

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

.cluetip-jtip #cluetip-inner {
  padding: 0 5px 5px;
  display: inline-block;
}
.cluetip-jtip span#cluetip-close { 
  text-align: right;
  margin: 0 5px 5px;
  color: #900;
}

/***************************************
* Rounded Corners
   cluetipClass: 'rounded'
-------------------------------------- */

.cluetip-rounded {
  background: transparent url(bl.gif) no-repeat 0 100%;
  margin-top: 10px;
}

.cluetip-rounded #cluetip-outer {
  background: transparent url(tl.gif) no-repeat 0 0;
  margin-top: -12px;
}

.cluetip-rounded #cluetip-title {
  background: transparent url(tr.gif) no-repeat 100% 0;
  padding: 12px 12px 0;
  margin: 0 -12px 0 0;
  position: relative;
}
.cluetip-rounded #cluetip-inner {
  background: url(br.gif) no-repeat 100% 100%;
  padding: 5px 12px 12px;
  margin: 0 -12px 0 0;
  position: relative;
}

.cluetip-rounded span#cluetip-close { 
  text-align: right;
  margin: 0 5px 5px;
  color: #009;
  background: transparent;
}
.cluetip-rounded span#cluetip-close a {
  color: #777;
}
/* stupid IE6 HasLayout hack */
.cluetip-rounded #cluetip-title,
.cluetip-rounded #cluetip-inner {
  zoom: 1;
}

Rounded Corners

Known Issues and To Do

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

Downloads

ClueTip

Dependencies