clueTip : A jQuery Plugin

1. basic tip from title: This example pulls the clueTip's contents from the invoking element's title attribute via the "splitTitle" option.
   View the HTML

   <a class="title" href="#" title="This is the title|The first set of contents comes after the first delimiter in the title.|In this case, the delimiter is a pipe">

   View the jQuery

   $('a.title').cluetip({splitTitle: '|'});

2. basic ajax, with no title attribute: This one requires no options.
   View the HTML

   <a class="basic" href="ajax.htm" rel="ajax.htm">

   View the jQuery

   $('a.basic').cluetip();

3. 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});

4. 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'});

5. sticky:This is a sticky clueTip with "close" text in the title bar: 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, closePosition: 'title'});

6. local, with arrows: This one uses local content from a hidden div element and displays an arrow that points to the invoking 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'});

7. 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(5)').cluetip({
         hoverClass: 'highlight',
         sticky: true,
         closePosition: 'bottom',
         closeText: '<img src="styles/cross.png" alt="" />'
         truncate: 60
       });

8. click to activate: This one won't show the clueTip unless you click it: click me. It's also really wide.
   View the HTML

   <a href="ajaxclick.htm" rel="ajax5.htm" title="active ingredients">

   View the jQuery

   $('#clickme').cluetip({activation: 'click', width: 650});

jTip Theme

1. jTip Style clueTip, with an image placed in the title for closing it, because it's sticky.
   New: The clueTip will close if you mouse out of it.
   View the HTML

   <a class="jt" href="ajax6.htm" rel="ajax6.htm" title="jTip Style!">

   View the jQuery

   $('a.jt:eq(0)').cluetip({
         cluetipClass: 'jtip', 
         arrows: true, 
         dropShadow: false,
         hoverIntent: false,
         sticky: true,
         mouseOutClose: true,
         closePosition: 'title',
         closeText: '<img src="cross.png" alt="close" />'
       });
       

2. This one has hoverIntent turned off. Look for the link floated right: jTip Style clueTip
   View the HTML

   <a class="jt" href="ajax5.htm" rel="ajax5.htm">

   View the jQuery

   $('a.jt:eq(1)').cluetip({cluetipClass: 'jtip', arrows: true, dropShadow: false, hoverIntent: false});
       

3. This one pulls the clueTip contents directly from the title attribute of a span tag: splitTitle clueTip
   View the HTML
   <span title="Split Title|This clueTip's contents were created directly from the title attribute|Nice for minimum info.">
   View the jQuery

   $('span[@title]').css({borderBottom: '1px solid #900'}).cluetip({
         splitTitle: '|', 
         arrows: true, 
         dropShadow: false, 
         cluetipClass: 'jtip'}
       );

4. this sticky clueTip has a fixed height. It's generally a good idea to make fixed-height clueTips sticky as well, just in case the content requires a scrollbar to read it fully. It will be positioned below the clicked element unless there isn't enough room, in which case it will be positioned above.
   View the HTML

   <a class="jt" href="ajax5.htm" rel="ajax5.htm">

   View the jQuery

   $('a.jt:eq(2)').cluetip({
         cluetipClass: 'jtip', arrows: true, 
         dropShadow: false, 
         height: '150px', 
         sticky: true,
         positionBy: 'bottomTop'
       });

5. For this one, we're loading visible local content
   View the HTML

   <a class="jt" href="#" rel="p.localvisible">visible local content</a>

   View the jQuery

   $('a.jt:eq(3)').cluetip({local: true, hideLocal: false});

   and here is our visible local content!

6. togglable clueTip can be turned off by unchecking the checkbox
   clueTips
   View the HTML

   <a class="jt" href="ajax5.htm" rel="ajax5.htm">

   View the jQuery

   $('a.jt:eq(3)').cluetip({
         cluetipClass: 'jtip', arrows: true, 
         dropShadow: false, 
         onActivate: function(e) {
           var cb = $('#cb')[0];
           return !cb || cb.checked;
         }
       });

Rounded Corners Theme

1. content from title attribute, with the clueTip heading hidden.
   View the HTML

   <a href="ajax4.htm" title="|first line body|second line body">

   View the jQuery

   $('ol.rounded a:eq(0)').cluetip({splitTitle: '|', dropShadow: false, cluetipClass: 'rounded', showTitle: false});

2. this is a tooltip a tooltip a tooltip rounded corners theme and positioning by mouse.
   View the HTML

   <a href="ajax4.htm" rel="ajax4.htm" title="mouse positioned">

   View the jQuery

   $('ol.rounded a:eq(1)').cluetip({
     cluetipClass: 'rounded', 
     dropShadow: false, 
     positionBy: 'mouse'
   });

3. Another one with rounded corners theme. This one has "bottomTop" positioning: positioned under link, unless there isn't enough room (then over). It also has "topOffset" set to 70.
   View the HTML

   <a href="ajax4.htm" rel="ajax4.htm" title="bottom/top positioned">

   View the jQuery

   $('ol.rounded a:eq(2)').cluetip({cluetipClass: 'rounded', dropShadow: false, positionBy: 'bottomTop', topOffset: 70});

4. non-caching ajax clueTip with arrows enabled.
   View the HTML

   <a href="ajax4.htm" rel="ajax4.htm" title="rounded corners">

   View the jQuery

   $('ol.rounded a:eq(3)').cluetip({cluetipClass: 'rounded', dropShadow: false, sticky: true, ajaxCache: false, arrows: true});

5. ajax error: This one points to a file that does not exist.
   View the HTML

   <a href="ajax404.htm" rel="ajax404.htm">

   View the jQuery

   $('ol.rounded a:eq(4)').cluetip({cluetipClass: 'rounded', dropShadow: false});