擴展Bootstrap Tooltip插件使其可交互的方法

更新時間：2016年11月07日 11:41:31 作者：破狼

這篇文章主要介紹了擴展Bootstrap Tooltip插件使其可交互的方法,結(jié)合實例形式分析了bootstrap擴展tooltip插件的原理與具體操作技巧,需要的朋友可以參考下

本文實例講述了擴展Bootstrap Tooltip插件使其可交互的方法。分享給大家供大家參考，具體如下：

最近在公司某項目開發(fā)中遇見一特殊需求，請筆者幫助，因此有了本文的插件。在前端開發(fā)中tooltip是一個極其常用的插件，它能更好向使用者展示更多的文檔等幫助信息。它們通常都是一些靜態(tài)文本信息。但同事他們的需求是需要動態(tài)交互，在文本信息中存在幫助網(wǎng)頁的鏈接。如果使用常規(guī)tooltip，則在用戶移出tooltip依賴DOM節(jié)點后，tooltip panel則將被隱藏。所以用戶沒有辦法點擊到這些交互鏈接。

所以我們期望：給用戶一定的時間使得用戶能夠?qū)⑹髽藦囊蕾嚬?jié)點移動到tooltip panel；并且如果用戶鼠標停留在tooltip上則不能隱藏，使得用戶能夠與位于tooltip上的鏈接或者是其他form表單控件交互。

也許你覺得這并不難，在網(wǎng)上Google就有很多代碼可直接使用。是的，如下面這段來自plnkr.co的代碼（http://plnkr.co/edit/x2VMhh?p=preview）：

$(".pop").popover({ trigger: "manual" , html: true, animation:false})
  .on("mouseenter", function () {
    var _this = this;
    $(this).popover("show");
    $(".popover").on("mouseleave", function () {
      $(_this).popover('hide');
    });
  }).on("mouseleave", function () {
    var _this = this;
    setTimeout(function () {
      if (!$(".popover:hover").length) {
        $(_this).popover("hide");
      }
    }, 300);
});

它是使用bootstrap的popover來實現(xiàn)的，從bootstrap的源碼能看到popover是繼承至tooltip的組件之一。這里是通過將popover的觸發(fā)方式設(shè)為手動觸發(fā)，由我們自己來控制顯示和隱藏它的時機。并且在依賴節(jié)點離開的時候，給定300ms的延遲等待用戶進入tooltip panel，如果300ms還沒有進入tooltip則隱藏它。否則就阻止隱藏tooltip的邏輯。

這代碼雖然功能可用，但具有代碼潔癖的博主并不太滿意這樣的代碼。它難以閱讀維護，同時重用性也將極差。所以筆者決定要以bootstrap插件方式來一bs way寫這款插件。

當筆者查閱bootstrap tooltip源碼時，發(fā)現(xiàn)它是一個擴展性很不錯的插件。tooltip的顯示和隱藏依賴于它內(nèi)部的hoverState狀態(tài)來控制，in代表在依賴節(jié)點元素之上，out則代表移出了DOM元素。并且它也支持延遲動畫機制。所以我們可以如下方式控制hoverState的狀態(tài)：

var DelayTooltip = function (element, options) {
  this.init('delayTooltip', element, options);
  this.initDelayTooltip();
};
DelayTooltip.DEFAULTS = $.extend({}, $.fn.tooltip.Constructor.DEFAULTS, {
  trigger: 'hover',
  delay: {hide: 300}
});
DelayTooltip.prototype.delayTooltipEnter = function(){
    this.hoverState = 'in';
  };
  DelayTooltip.prototype.delayTooltipLeave = function(){
    this.hoverState = 'out';
    this.leave(this);
  };
 DelayTooltip.prototype.initDelayTooltip = function(){
   this.tip()
     .on('mouseenter.' + this.type, $.proxy(this.delayTooltipEnter, this))
     .on('mouseleave.' + this.type, $.proxy(this.delayTooltipLeave, this));
 };

這里在構(gòu)造tooltip對象同時也注冊tooltip panel的mouseenter、mouseleave.事件，并設(shè)置對應(yīng)的hoverState狀態(tài)。當移出tooltip panel時，這里需要手動的調(diào)用來自tooltip繼類的leave方法。對于隱藏延時則設(shè)置在默認option中，使其能夠可配置。

上面的代碼就是我們所需要擴展tooltip的所有的代碼。當然要想作為一個通用的bootstrap插件，還需要它固定的插件配置代碼。插件全部代碼如下：

(function ($) {
 'use strict';
 var DelayTooltip = function (element, options) {
  this.init('delayTooltip', element, options);
  this.initDelayTooltip();
 };
 if (!$.fn.tooltip) throw new Error('Popover requires tooltip.js');
 DelayTooltip.VERSION = '0.1';
 DelayTooltip.DEFAULTS = $.extend({}, $.fn.tooltip.Constructor.DEFAULTS, {
  trigger: 'hover',
  delay: {hide: 300}
 });
 DelayTooltip.prototype = $.extend({}, $.fn.tooltip.Constructor.prototype);
 DelayTooltip.prototype.constructor = DelayTooltip;
 DelayTooltip.prototype.getDefaults = function () {
  return DelayTooltip.DEFAULTS;
 };
  DelayTooltip.prototype.delayTooltipEnter = function(){
    this.hoverState = 'in';
  };
  DelayTooltip.prototype.delayTooltipLeave = function(){
    this.hoverState = 'out';
    this.leave(this);
  };
 DelayTooltip.prototype.initDelayTooltip = function(){
   this.tip()
     .on('mouseenter.' + this.type, $.proxy(this.delayTooltipEnter, this))
     .on('mouseleave.' + this.type, $.proxy(this.delayTooltipLeave, this));
 };
 function Plugin(option) {
  return this.each(function () {
   var $this  = $(this);
   var data  = $this.data('bs.delayTooltip');
   var options = typeof option == 'object' && option;
   if (!data && /destroy|hide/.test(option)) return;
   if (!data) $this.data('bs.delayTooltip', (data = new DelayTooltip(this, options)));
   if (typeof option == 'string') data[option]();
  });
 }
 var old = $.fn.delayTooltip;
 $.fn.delayTooltip       = Plugin;
 $.fn.delayTooltip.Constructor = DelayTooltip;
 $.fn.delayTooltip.noConflict = function () {
  $.fn.delayTooltip = old;
  return this;
 };
})(jQuery);

這里基本都是bootstrap插件機制的固定模板，僅僅需要套用上就行。有了這個插件擴展，那么我們就可以如下使用這款插件：

HTML:

<div id="tooltip">bs tooltip:你能點擊鏈接？</div>
<hr>
<div id="delayTooltip">delay tooltip：嘗試點擊鏈接</div>
<hr>
<div id="delayTooltipInHtml" data-html="true" data-placement="bottom" data-toggle="delayTooltip">delay tooltip:利用html標簽實現(xiàn)</div>

JavaScript 代碼：

(function(global, $){
  var page = function(){
  };
  page.prototype.bootstrap = function(){
    var html = 'Weclome to my blog <a target="_blank" href="greengerong.github.io">破狼博客</a>!<input type="text" placeholder="input some thing"/>';
    $('#tooltip').tooltip( {
      html: true,
      placement: 'top',
      title: html
    });
    $('#delayTooltip').delayTooltip( {
      html: true,
      placement: 'bottom',
      title: html
    });
 $('#delayTooltipInHtml').attr('title', html).delayTooltip();
 return this;
};
   global.Page = page;
})(this, jQuery);
$(function(){
  'use strict';
 var page = new window.Page().bootstrap();
  //
});

這款插件既支持jQuery在HTML中聲明屬性的方式，同時也可以在javascript中使用。效果如下：