qTip2小技巧：为多个目标元素共享一个tip

jQuery为元素提供click、bind等方法绑定事件，但假如需要绑定事件的元素过多的话（如$("a")），不管是查找元素还是逐个绑定事件都比较影响效率；所以jQuery还提供了效率更高live方法，以及效率最高的delegate方法，来处理此类问题。

在使用qTip2的时候，也存在绑定tip的效率问题，不但要查找元素、绑定事件、及为每一个元素创建tip，比较浪费资源；幸好，qTip2也提供了类似live/delegate的方式来绑定tip；当然，如果嫌qTip2提供的不够好，那也完全可以用jQuery.delegate方法来实现。

以下就这3种方式来实现为多个目标共享一个tip逐一演示，首先假定页面存在以下元素：

1 2 3

< p  id = "demo1" >      我的博客地址： < a  href = "http://lwme.cnblogs.com/"  target = "_blank"  title = "囧月" >囧月</ a > </ p >

通过设置position.target=event

这也是官方DEMO中使用的方法，主要演示为有title属性的a标记显示tip：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

// 选择demo1下有title属性的a标记 var  elems = $( '#demo1 a[title]' ) // 移除title属性，保存title到tooltip属性中 .each( function (i) {    $.attr( this , 'tooltip' , $.attr( this , 'title' )); }) .removeAttr( 'title' );   // 创建一个用于共享的tip $( '<div />' ).qtip( {    content: ' ' ,    position: {      target: 'event' , // 通过事件响应      effect: false      // 关闭默认的 'slide' 动画效果             },    show: {      target: elems // 设置显示的目标元素    },    hide: {      target: elems    },    events: {      show: function (event, api) {        // 更新tip内容        var  target = $(event.originalEvent.target);          if (target.length) {          api.set( 'content.text' , target.attr( 'tooltip' ));        }      }    } });

通过设置positon.target=mouse

这种方法通过在指定区域创建一个tip，并跟随鼠标指针移动，实时显示当前指向目标的内容：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

var  setText = function (event, api) {    var  target = $(event.originalEvent && event.originalEvent.target);        if (target.length) {      api.set( 'content.text' , target.text()); // 更新内容    } };   // 在指定区域创建用于共享的tip $( '#demo1' ).qtip( {    content: ' ' ,    position: {      target: 'mouse' , // 跟随鼠标指针      effect: false , // 关闭效果      viewport: $(window),      adjust: { x: 10, y: 10 } // tip位置偏移，防止遮住鼠标指针    },    events: {      show: setText,      move: setText // 移动时也设置内容    }    });

当然，这种方法有一个缺点，就是无法针对容器内特定的标记进行提示，所以这种方法比较适用于表格。

PS：或许是我没找到方法，反正通过api的show/hide方法，经常会显示不出来。

通过jQuery的delegate绑定事件

这种方法是直接创建一个tip，然后通过mouseover/mouseout事件来控制tip的显示隐藏

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

// 创建用于共享的tip var  api = $( '<div />' ).qtip( {    content: ' ' ,    show: {      event: false    } }).qtip( "api" );   // 监听事件 $( "#demo1" ).delegate( "a" , "mouseover mouseout" , function (e) {    if  (e.type == 'mouseover' ) {      api.set( 'position.target' , $( this ));      api.set( 'content.text' , this .innerHTML);      api.show();    } else      api.hide(); });

结尾

以上方法仅仅只是一些尝试，还有一些不完善的地方，当然相对来说还是官方DEMO提供的方法完善一些；如果哪位TX有更好的方法，也请提供下。

最后还是提供一下DEMO。

?