Extend the bootstrap ToolTip plugin to make it interactive

Recently in the company of a project to meet a special needs, please the author help, so there is a plugin for this article. In front-end development, the ToolTip is a very popular plugin, it can better show the user more documents and other help information. They are usually static text messages. But colleagues their needs are the need for dynamic interaction, in the text message there is a link to help Web pages. If you use regular ToolTip, the ToolTip panel will be hidden after the user moves out of the ToolTip dependent DOM node. So users have no way to click on these interactive links.

So we expect: to give the user a certain amount of time to move the mouse from the dependent node to the tooltip panel, and if the user's mouse rests on the ToolTip, it cannot be hidden, allowing the user to interact with the link on the ToolTip or other form form controls.

Perhaps you think this is not difficult, Google on the internet has a lot of code to use directly. Yes, as in the following code from 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);});

It is the use of bootstrap popover to achieve, from bootstrap source can see PopOver is inherited to the ToolTip one of the components. This is done by setting the trigger mode of the PopOver to manual triggering and by ourselves to control the timing of displaying and hiding it. And when the dependent node leaves, the delay of a given 300ms waits for the user to enter the ToolTip panel, hiding it if 300ms has not yet entered the ToolTip. Otherwise, the logic of hiding the ToolTip is blocked.

While this code is available, bloggers with code cleanliness are not satisfied with such code. It is difficult to read and maintain, while reusability will be very poor. So I decided to bootstrap plug-in method to a BS way to write this plugin.

When the author consulted bootstrap ToolTip source code, found that it is a very good extension of the plug-in. The display and concealment of the tooltip depends on its internal hoverstate state to control, in represents the dependent node element, and out represents the removal of the DOM element. And it also supports the delay animation mechanism. So we can control the state of the hoverstate in the following ways:

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

Here, the ToolTip object is also registered with the MouseEnter, MouseLeave. Event of the ToolTip panel, and the corresponding hoverstate state is set. When moving out of the ToolTip panel, it is necessary to manually invoke the Leave method from the ToolTip's secondary class. For hidden delay, it is set in the default option so that it can be configured.

The code above is all the code we need to extend the ToolTip. Of course, to be a generic bootstrap plug-in, it also requires a fixed plug-in configuration code. The full plugin code is as follows:

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

Here is basically the bootstrap plug-in mechanism of the fixed template, just need to apply on the line. With this plugin extension, we can use the plugin as follows: You can also see the effect http://jsbin.com/wicoki/edit?html,js,output in Jsbin:

Html:

<div id="tooltip">bs tooltip:你能点击链接？</div>

JavaScript Code:

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

This plug-in supports both the way jquery declares attributes in HTML, and it can be used in JavaScript as well. The effect is as follows:

Extend the bootstrap ToolTip plugin to make it interactive