clueTip : A jQuery Plugin

clueTip Plugin Demo

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 (heading) 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. sticky, with arrows:This sticky clueTip has its "close" text in the title bar. It won't close until you close it, or until you hover over another clue-tipped link. It also displays an arrow on one of its sides, pointing to the invoking element. sticky clueTip with arrows
    View the HTML
    <a id="sticky" href="ajax6.htm" rel="ajax6.htm">
    View the jQuery
    $('#sticky').cluetip({sticky: true, closePosition: 'title', arrows: true});
  5. 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'});
  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});
  9. experimental mouse tracking: The clueTip will move in the direction of your mouse movement, as long as you're still hovering over the invoking element.
    View the HTML
    <a href="ajax5.htm" title="mouse tracks" rel="ajax5.htm">
    View the jQuery
    $('ol:first a:last').cluetip({tracking: true});

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. 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
    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.