Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Displays a highly customizable tooltip when the user hovers (default) or clicks (optional) the matched elements.
JavaScript
branch: master

This branch is 71 commits behind kswedberg:master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
demo
images
lib
test
.gitignore
changelog.md
index.html
jquery.cluetip.css
jquery.cluetip.js
jquery.cluetip.min.js
readme.md

readme.md

jQuery clueTip Plugin

License

Dual licensed under the MIT and GPL licenses:

Copyright Karl Swedberg

Requirements

  • jQuery v1.3+

Description

Displays a highly customizable tooltip when the user interacts with the matched element. As of clueTip version 1.1, this plugin is ThemeRoller Ready.

Options

The clueTip plugin allows for (too?) many options. For a complete list, check out the plugin's home page

Content via ajax

By default, the clueTip plugin loads a page indicated by the "rel" attribute via ajax and displays its contents. However, the attribute to be used for both the body and the heading of the clueTip is user-configurable. If a "title" attribute is specified, its value is used as the clueTip's heading.

Content from HTML element

Optionally, the clueTip's body can display content from an element on the same page.

Just indicate the element's id (e.g. "#some-id") in the rel attribute.

Content from title attribute

Optionally, the clueTip's body can display content from the title attribute, when a delimiter is indicated.

  • The string before the first instance of the delimiter is set as the clueTip's heading.
  • All subsequent strings are wrapped in separate DIVs and placed in the clueTip's body.

Examples

This is the most basic clueTip. It displays a 275px-wide clueTip on mouseover of the element with an ID of "tip." On mouseout of the element, the clueTip is hidden.

$('#tip).cluetip();

The following displays a clueTip on mouseover of all <a> elements with class="clue". The hovered element gets a class of "highlight" added to it (so that it can be styled appropriately. This may be useful for non-anchor elements in older browsers such as IE6.). The clueTip is "sticky," which means that it will not be hidden until the user either clicks on its "close" text/graphic or displays another clueTip. The "close" text/graphic is set to display at the bottom of the clueTip (default is top) and display an image rather than the default "Close" text. Moreover, the body of the clueTip is truncated to the first 60 characters, which are followed by an ellipsis (...). Finally, the clueTip retrieves the content with a POST request rather than the default GET.

$('a.clue').cluetip({
  hoverClass: 'highlight',
  sticky: true,
  closePosition: 'bottom',
  closeText: '<img src="cross.png" alt="close" />',
  truncate: 60,
  ajaxSettings: {
    type: 'POST'
  }
});

More examples can be found at http://plugins.learningjquery.com/cluetip/demo/

Credits

  • Inspired by Cody Lindley's jTip (http://www.codylindley.com)
  • Thanks to the following people for their many and varied contributions: Jonathan Chaffer, Glen Lipka, Shelane Enos, Hector Santos, Torben Schreiter, Dan G. Switzer, Jörn Zaefferer
Something went wrong with that request. Please try again.