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

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

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

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

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

通过设置position.target=event

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

  // 选择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，并跟随鼠标指针移动，实时显示当前指向目标的内容：

  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的显示隐藏

  // 创建用于共享的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。