Ways to extend bootstrap ToolTip plug-ins to make them interactive _javascript techniques

The examples in this article describe the ways in which extended bootstrap ToolTip plug-ins can interact. Share to everyone for your reference, specific as follows:

Recently in the development of a project in the company met a special need, please help me, so with the plugin of this article. ToolTip is a very common plug-in in front-end development, and it can better show users more information such as documents. They are usually static text messages. But colleagues their needs are dynamic interactions, and there are links to help pages in text messages. If you use regular ToolTip, the ToolTip panel is hidden after the user moves out of the ToolTip dependent DOM node. So the user has no way to click on these interactive links.

So we expect to give the user a certain amount of time to enable the user to move the mouse from the dependent node to the ToolTip panel, and not hide it if the user hovers over the ToolTip, allowing the user to interact with the link on the ToolTip or other form form controls.

Maybe you think it's not difficult, Google on the internet there are a lot of code can be used directly. Yes, as 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 implemented using bootstrap popover, which can be seen from the source of bootstrap and PopOver is one of the components that inherit to ToolTip. This is done by setting the trigger of the popover to a manual trigger, by ourselves to control the timing of displaying and hiding it. And when the dependent node leaves, the given 300ms delay waits for the user to enter the ToolTip panel and hides it if 300ms has not yet entered the ToolTip. Otherwise, the logic of hiding ToolTip is blocked.

This code is available, but bloggers with code cleanliness are not quite satisfied with the code. It is difficult to read and maintain, while reusability will be extremely poor. So I decided to Bootstrap plug-in way to a BS way write this plug-in.

When the author consulted bootstrap ToolTip source code, found that it is a very good extension of plug-ins. ToolTip's display and concealment depend on its internal hoverstate state to control, in represents on the dependency 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 hoverstate in the following way:

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

The ToolTip object is also registered in the ToolTip panel MouseEnter, MouseLeave. event, and set the corresponding hoverstate state. When moving out of the ToolTip panel, it is necessary to manually invoke the Leave method from the ToolTip relay class. For hidden latency, 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 general-purpose bootstrap plug-in, it also requires a fixed plug-in configuration code. The full plug-in 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.delay Tooltipenter, 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 are basically the bootstrap plug-in mechanism of the fixed template, only need to apply on the line. With this plugin extension, we can use this plugin as follows:

Html:

<div id= "tooltip" >bs tooltip: Can you click on the link? </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 "> Wolf blog </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 plugin supports both the way jquery declares properties in HTML and can also be used in JavaScript. The effect is as follows:

I hope this article will help us to design the program based on Bootstrap.