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.html" rel="ajax.html">
    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.html" rel="ajax3.html">
    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.html" rel="ajax6.html">
    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.html">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.html">
    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.html" title="active ingredients">
    View the jQue