擴充Bootstrap Tooltip外掛程式使其可互動的方法_javascript技巧

本文執行個體講述了擴充Bootstrap Tooltip外掛程式使其可互動的方法。分享給大家供大家參考，具體如下：

最近在公司某項目開發中遇見一特殊需求，請筆者協助，因此有了本文的外掛程式。在前端開發中tooltip是一個極其常用的外掛程式，它能更好向使用者展示更多的文檔等協助資訊。它們通常都是一些靜態文本資訊。但同事他們的需求是需要動態互動，在文本資訊中存在協助網頁的連結。如果使用常規tooltip，則在使用者移出tooltip依賴DOM節點後，tooltip panel則將被隱藏。所以使用者沒有辦法點擊到這些互動連結。

所以我們期望：給使用者一定的時間使得使用者能夠將滑鼠從依賴節點移動到tooltip panel；並且如果使用者滑鼠停留在tooltip上則不能隱藏，使得使用者能夠與位於tooltip上的連結或者是其他form表單控制項互動。

也許你覺得這並不難，在網上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來實現的，從bootstrap的源碼能看到popover是繼承至tooltip的組件之一。這裡是通過將popover的觸發方式設為手動觸發，由我們自己來控制顯示和隱藏它的時機。並且在依賴節點離開的時候，給定300ms的延遲等待使用者進入tooltip panel，如果300ms還沒有進入tooltip則隱藏它。否則就阻止隱藏tooltip的邏輯。

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

當筆者查閱bootstrap tooltip源碼時，發現它是一個擴充性很不錯的外掛程式。tooltip的顯示和隱藏依賴於它內部的hoverState狀態來控制，in代表在依賴節點元素之上，out則代表移出了DOM元素。並且它也支援延遲動畫機制。所以我們可以如下方式控制hoverState的狀態：

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)); };

這裡在構造tooltip對象同時也註冊tooltip panel的mouseenter、mouseleave.事件，並設定對應的hoverState狀態。當移出tooltip panel時，這裡需要手動的調用來自tooltip繼類的leave方法。對於隱藏延時則設定在預設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標籤實現</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中使用。效果如下：

希望本文所述對大家基於bootstrap的程式設計有所協助。