jquery clueTip
参考 http://plugins.learningjquery.com/cluetip/
Overview
The clueTip plugin allows you to easily show a fancy tooltip when the user's mouse hovers over (or, optionally, clicks on) any element you designate in your script. If the element includes a title attribute, its text becomes the heading of the clueTip.
If you like this plugin and you're feeling generous, perhaps you'd also like to visit my amazon.com wish list?
Quick Start Guide
Showing the most basic clueTip can be achieved in two easy steps.
1 Add HTML markup to your page for elements that you want to invoke a clueTip. By default, the clueTip plugin will use the
rel attribute to load contents into the tooltip body via
AHAH.
<!-- use ajax/ahah to pull content from fragment.html: -->
<p><a class="tips" href="fragment.html" rel="fragment.html">show me the cluetip!</a></p>
<!-- use title attribute for clueTip contents, but don't include anything in the clueTip's heading -->
<p><a id="houdini" href="houdini.html" title="|Houdini was an escape artist.|He was also adept at prestidigitation.">Houdini</a></p>
2
Include the
jQuery
core file and the
clueTip
plugin in the
<head>
of your document. You may optionally include the
hoverIntent
plugin as well. After these scripts are referenced, you can reference a custom script file to invoke your clueTips (preferred) or enter the script directly in the
<head>
(shown below). You should also include the clueTip
stylesheet
(jquery.cluetip.css) after the scripts.
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.hoverIntent.js" type="text/javascript"></script> <!-- optional -->
<script src="jquery.cluetip.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('a.tips').cluetip();
$('#houdini').cluetip({
splitTitle: '|', // use the invoking element's title attribute to populate the clueTip...
// ...and split the contents into separate divs where there is a "|"
showTitle: false // hide the clueTip's heading
});
});
</script>
<link rel="stylesheet" href="jquery.cluetip.css" type="text/css" />
You can change the default style and behavior in many ways. See API / Options for details.
clueTip Plugin API / Options
The clueTip Plugin API provides two methods, with many options.-
{
insertionType: 'appendTo', // how the clueTip is inserted into the DOM
// possible values: 'appendTo', 'prependTo', 'insertBefore', 'insertAfter'
insertionElement: 'body' // where in the DOM the clueTip is to be inserted
}
$.cluetip.setup(options)
cluetip(options)Displays a highly customizable tooltip via ajax (default) or local content or the title attribute of the invoking element
$.fn.cluetip.defaults = { // default options; override as needed
multiple: false, // Allow a new tooltip to be created for each .cluetip() call
width: 275, // The width of the clueTip
height: 'auto', // The height of the clueTip. more info below [1]
cluezIndex: 97, // Sets the z-index style property of the clueTip
positionBy: 'auto', // Sets the type of positioning. more info below [2]
topOffset: 15, // Number of px to offset clueTip from top of invoking element. more info below [3]
leftOffset: 15, // Number of px to offset clueTip from left of invoking element. more info below [4]
local: false, // Whether to use content from the same page for the clueTip's body
// (treats the attribute used for accessing the tip as a jQuery selector,
// but only selects the first element if the selector matches more than one). more info below [5]
hideLocal: true, // If local option is set to true, this determines whether local content
// to be shown in clueTip should be hidden at its original location
localPrefix: null, // string to be prepended to the tip attribute if local is true
localIdSuffix: null, // string to be appended to the cluetip content element's id if local is true
attribute: 'rel', // the attribute to be used for fetching the clueTip's body content
titleAttribute: 'title', // the attribute to be used for fetching the clueTip's title
splitTitle: '', // A character used to split the title attribute into the clueTip title and divs
// within the clueTip body. more info below [6]
escapeTitle: false, // whether to html escape the title attribute
showTitle: true, // show title bar of the clueTip, even if title attribute not set
cluetipClass: 'default',// class added to outermost clueTip div in the form of 'cluetip-' + clueTipClass. more info below [7]
hoverClass: '', // class applied to the invoking element onmouseover and removed onmouseout
waitImage: true, // whether to show a "loading" img, which is set in jquery.cluetip.css
cursor: 'help',
arrows: false, // if true, displays arrow on appropriate side of clueTip. more info below [8]
dropShadow: true, // set to false if you don't want the drop-shadow effect on the clueTip
dropShadowSteps: 6, // adjusts the size of the drop shadow
sticky: false, // keep visible until manually closed
mouseOutClose: false, // close when clueTip is moused out
activation: 'hover', // set to 'click' to force user to click to show clueTip
clickThrough: true, // if true, and activation is not 'click', then clicking on a clueTipped link will take user to
// the link's href, even if href and tipAttribute are equal
tracking: false, // if true, clueTip will track mouse movement (experimental)
delayedClose: 0, // close clueTip on a timed delay (experimental)
closePosition: 'top', // location of close text for sticky cluetips; can be 'top' or 'bottom' or 'title'
closeText: 'Close', // text (or HTML) to to be clicked to close sticky clueTips
truncate: 0, // number of characters to truncate clueTip's contents. if 0, no truncation occurs
// effect and speed for opening clueTips
fx: {
open: 'show', // can be 'show' or 'slideDown' or 'fadeIn'
openSpeed: ''
},
// settings for when hoverIntent plugin is used
hoverIntent: {
sensitivity: 3,
interval: 50,
timeout: 0
},
// function to run just before clueTip is shown.
onActivate: function(e) {return true;},
// function to run just after clueTip is shown.
onShow: function(ct, c){},
// function to run just after clueTip is hidden.
onHide: function(ct, ci){},
// whether to cache results of ajax request to avoid unnecessary hits to server
ajaxCache: true,
// process data retrieved via xhr before it's displayed
ajaxProcess: function(data) {
data = data.replace(/<(script|style|title)[^<]+<\/(script|style|title)>/gm, '').replace(/<(link|meta)[^>]+>/g,'');
return data;
},
// can pass in standard $.ajax() parameters. Callback functions, such as beforeSend,
// will be queued first within the default callbacks.
ajaxSettings: {
// error: function(ct, ci) { /* override default error callback */ },
// beforeSend: function(ct, ci) { /* called first within default beforeSend callback */ },
dataType: 'html'
}
};
- height: Setting a specific height also sets <div id="cluetip-outer"> to "overflow:auto"
- positionBy: Available options are 'auto', 'mouse', 'bottomTop', 'fixed'. Change to 'mouse' if you want to override positioning by element and position the clueTip based on where the mouse is instead. Change to 'bottomTop' if you want positioning to begin below the mouse when there is room or above if not -- rather than right or left of the elemnent and flush with element's top Change to 'fixed' if you want the clueTip to appear in exactly the same location relative to the linked element no matter where it appears on the page. Use 'fixed' at your own risk.
- topOffset:For positionBy "auto", "mouse", and "bottomTop", the number will be added to the clueTip's "top" value if the clueTip appears below the invoking element and subtracted from it if the clueTip appears above. For positionBy "fixed", the number will always be added to the "top" value, offsetting the clueTip from the top of the invoking element.
- leftOffset: For positionBy "auto", "mouse", and "bottomTop", the number will be added to clueTip's "left" value if the clueTip appears to the right of the invoking element and subtracted if the clueTip appears to the left. For positionBy "fixed", the number will always be added to the "left" value of the clueTip, offsetting it from the right side of the invoking element.
- local: for example, using the default tip attribute, "rel", you could have a link — <a href="somewhere.htm" rel=".someClass"> — that would show the contents of the first element in the DOM that has a class of "someClass."
- splitTitle: if used, the clueTip will be populated only by the title attribute
- cluetipClass: this is also used for a "directional" class on the same div, depending on where the clueTip is in relation to the invoking element. The class appears in the form of 'cluetip-' + direction +cluetipClass. this allows you to create your own clueTip theme in a separate CSS file or use one of the three pre-packaged themes: default, jtip, or rounded.
- arrows: UPDATE: this option displays a div containing an arrow background image. Arrow images are set using the background-image property in the CSS. The direction of the arrow changes depending on which side of the invoking element the clueTip appears. The arrows option sets the background-position of the cluetip div so that the arrow will accurately point to the invoking element, regardless of where it appears in relation to it.
Demo
Download
The plugin is available on Github, where it is updated more frequently with incremental improvements and bug fixes: clueTip on Github