clueTip : A jQuery Plugin

Examples

Below are quite a few examples of how you can add a clueTip to your page, using a wide range of options. Keep in mind that there is nothing magical about the HTML markup. You can use any jQuery selector you want to attach your clueTips. For example, if you want to attach clueTips to all links with a class of "peanuts," you would simply write in your jQuery code: $('a.peanuts').cluetip();.

Default Style

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

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();
```
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});
```
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'});
```
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'});
```
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'});
```

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

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

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" />'
    });

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

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

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!

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

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

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

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});
```

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

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

this is the local content to load when the 'local' parameter is set to true.

clueTip : A jQuery Plugin

Examples

Default Style

Hover over me.

jTip Theme

Rounded Corners Theme