clueTip : A jQuery Plugin

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

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

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

  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: 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'});
  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 slideDown effect and 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. togglable clueTip can be turned off by unchecking the checkbox
    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. 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});

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