Jquery 的clueTip插件使用

clueTip这个jQuery插件方便您为链接或其它元素添加Tooltip功能。当链接包括title属性时，它的内容将变成clueTip的标题。clueTip中显示的内容可以通过Ajax获取，也可以从当前页面中的元素中获取

<a href="<s:url value="/wxdate/newsInfoShow.action?newsMain.newsId=%{newsId}"/>" rel="<s:url value="/wxdate/showAbst.action?newsMain.newsId=%{newsId}"/>" title="<s:property value="newsTitleShort" />"><s:property value='origiTitle'/></a>

在页面加载完成后初始化为a标签绑定cluetip事件$(function(){//为a标签绑定cluetip事件          $('a').cluetip({  cluetipClass: 'jtip',   dropShadow: false,  hoverIntent: false,  ajaxCache: false,  mouseOutClose: true,  sticky: true});}

Cluetip API

$.fn.cluetip.defaults = {  // default options; override as needed

   multiple:         false,    // Allow a new tooltip to be created foreach .cluetip() call

   width:            275,      // The width of the clueTip

   height:           'auto',   // The height of the clueTip. more infobelow [1]

   cluezIndex:       97,       // Sets the z-index style property ofthe clueTip

   positionBy:       'auto',   // Sets the type of positioning. more infobelow [2]

   topOffset:        15,       // Number of px to offset clueTip fromtop of invoking element. more info below [3]

   leftOffset:       15,       // Number of px to offset clueTip fromleft of invoking element. more info below [4]

   local:            false,    // Whether to use content from the samepage for the clueTip's body

                                // (treats theattribute used for accessing the tip as a jQuery selector,

                                // but onlyselects the first element if the selector matches more than one). more infobelow [5]

   hideLocal:        true,     // If local option is set to true, thisdetermines whether local content

                                // to be shown in clueTip should be hidden at its original location

   localPrefix:      null,       // string to be prepended to the tipattribute if local is true

   localIdSuffix:    null,     // string to be appended to the cluetipcontent element's id if local is true

   attribute:        'rel',    // the attribute to be used for fetchingthe clueTip's body content

   titleAttribute:   'title',  // the attribute to be used for fetching theclueTip's title

   splitTitle:       '',       // A character used to split the titleattribute into the clueTip title and divs

                                // within theclueTip body. more info below [6]

   escapeTitle:      false,    // whether to html escape the titleattribute

   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 elementonmouseover 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 appropriateside of clueTip. more info below [8]

   dropShadow:       true,     // set to false if you don't want thedrop-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 toshow clueTip

   clickThrough:     true,    // if true, and activation is not 'click',then clicking on a clueTipped link will take user to

                                // the link'shref, even if href and tipAttribute are equal

   tracking:         false,    // if true, clueTip will track mousemovement (experimental)

   delayedClose:     0,        // close clueTip on a timed delay(experimental)

   closePosition:    'top',    // location of close text for stickycluetips; can be 'top' or 'bottom' or 'title'

   closeText:        'Close',  // text (or HTML) to to be clicked to closesticky clueTips

   truncate:         0,        // number of characters to truncateclueTip'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 toserver

   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 asbeforeSend,

   // 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 beforeSendcallback */ },

     dataType: 'html'

    }

  };