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。