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

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

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

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

?

1 2 3

我的博客地址： http://lwme.cnblogs.com/" target="_blank" title="囧月">囧月

通过设置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 $(' ').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 = $(' ').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。