BootStrap Tooltip插件源码解析

Bootstrap Tooltip插件是一个简单易用，且对用户友好的Web开发工具，其基于jQuery javascript library实现，可以加快你的Web开发速度。

Tooltip插件的基本用法

在需要使用Tooltip的HTML代码元素上添加"data-toggle"和 "data-placement"属性，其中 "data-toggle"属性的值为 "tooltip", "data-placement"属性设置Tooltip显示位置，例如 "top", "bottom", "left" 或 "right"。

<button type="button" class="btn" data-toggle="tooltip" data-placement="top" title="This is the tooltip text">Top</button>

当用户把鼠标移动到按钮上时，会弹出一个Tooltip提示框，内容为 "This is the tooltip text"。

Tooltip选项设置

除了基本的用法，Bootstrap Tooltip插件还支持一些可配置的选项，包括：animation（动画）、delay（延迟）、html（HTML内容）、selector（选择器）、template（模板）、title（标题）和 trigger（触发方式）。

以下是一个例子，演示组合样式的设置：

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="This is the tooltip text" data-animation="true" data-delay="500" data-html="true" data-selector=".btn" data-template="<div class='tooltip' role='tooltip'><div class='tooltip-arrow'></div><div class='tooltip-inner'></div></div>" data-trigger="focus">Hover over me</button>

源码解析

Bootstrap Tooltip插件的源码基于jQuery的事件绑定实现，插件实现的主要工作包括，绑定事件监听、创建与隐藏提示框元素、采用CSS布局及计算提示框位置等。

具体实现过程如下：

绑定事件监听：插件通过jQuery的事件绑定接口，订阅目标Element的需要监听的事件，例如"mouseenter"，"mousemove"或"click"等。

this._$element .on('mouseenter' + eventType + " " + 'focus' + eventType, $.proxy(this.enter, this)) .on('mouseleave' + eventType + " " + 'blur' + eventType, $.proxy(this.leave, this));

创建与隐藏提示框元素：

插件采用了下面方法创建Tooltip HTML元素及内容，并把元素添加到body中。插件隐藏Tooltip元素的方法是设置其可见性属性为"hidden"，而非使用CSS类名样式控制元素的可见/隐藏。

```
Tooltip.prototype.show = function () {
// 创建Tooltip元素
var $tip = this.tip(),
// 获取内容
title = this.getTitle();

   $tip.find('.tooltip-inner')[this.options.html ? 'html' : 'text'](title);
   $tip.removeClass('fade in');

   // 获取显示位置
   var placement = typeof this.options.placement == 'function' ?
       this.options.placement.call(this, $tip[0], this.$element[0]) :
       this.options.placement,

       // 计算元素位置
       pos = this.getPosition(),

       // 获取元素宽度和高度
       actualWidth = $tip[0].offsetWidth,
       actualHeight = $tip[0].offsetHeight,

       // 获取箭头元素
       tp = this.getCalculatedOffset(placement, pos, actualWidth, actualHeight);

   // 设置箭头位置及可见性
   this.applyPlacement(tp, placement);
   this.$element.trigger('shown.bs.' + this.type);

};

Tooltip.prototype.hide = function() {
// 隐藏Tooltip元素
var that = this,
$tip = this.tip(),
e = $.Event('hide.bs.' + this.type);

   function complete() {
       if(that.hoverState != 'in') $tip.detach();
   }

   this.$element.removeAttr('aria-describedby');
   this.$element.trigger(e);

   if(e.isDefaultPrevented()) return;

   $tip.removeClass('in');

   $.support.transition && $tip.hasClass('fade') ?
       $tip
       .one('bsTransitionEnd', complete)
       .emulateTransitionEnd(Tooltip.TRANSITION_DURATION) :
       complete();

   this.hoverState = null;
   return this;

};
```

注意到，为了稍后准确计算Tooltip位置及大小，先显示show()该元素，然后再利用$tip.offsetWidth和$tip.offsetHeight来得到元素的实际大小。（ToolTip.TRANSITION_DURATION 为 150ms）

采用CSS布局及计算位置：

Tooltip插件基于CSS布局来横向与纵向定位Tooltip元素的坐标位置，其算法使用了CSS3的位移函数，代码如下：

```
Tooltip.prototype.applyPlacement = function(offset, placement) {
var $tip = this.tip(),
width = $tip[0].offsetWidth,
height = $tip[0].offsetHeight;

   // manually read margins because getBoundingClientRect includes difference
   var marginTop = parseInt($tip.css('margin-top'), 10),
       marginLeft = parseInt($tip.css('margin-left'), 10);

   // we must check for NaN for ie 8/9
   if (isNaN(marginTop))  marginTop  = 0;
   if (isNaN(marginLeft)) marginLeft = 0;

   offset.top  += marginTop;
   offset.left += marginLeft;

   $.offset.setOffset($tip[0], $.extend({
       using: function(props) {
           $tip.css({
               top: Math.round(props.top),
               left: Math.round(props.left)
           });
       }
   }, offset), 0);

   $tip.addClass('in');

   // check to see if placing tip in new offset caused the tip to resize itself
   var actualWidth  = $tip[0].offsetWidth,
       actualHeight = $tip[0].offsetHeight;

   if (placement == 'top' && actualHeight != height) {
       offset.top = offset.top + height - actualHeight;
   }

   var delta = this.getViewportAdjustedDelta(placement, offset, actualWidth, actualHeight);

   if (delta.left) offset.left += delta.left;
   else offset.top += delta.top;

   var isVertical        = /top|bottom/.test(placement),
       arrowDelta        = isVertical ? delta.left * 2 - width + actualWidth : delta.top * 2 - height + actualHeight,
       arrowOffsetPosition = isVertical ? 'offsetWidth' : 'offsetHeight';

   $tip.offset(offset);

   this.replaceArrow(arrowDelta, $tip[0][arrowOffsetPosition], isVertical);

};
```

以上就是Bootstrap Tooltip插件的基本用法和使用方法，以及其实现过程的源码解析，具体使用时应根据需求选用其标准配置或自定义配置，最大程度发挥该插件的好处。

示例说明

样例1：

显示一个带动画效果的提示框, 当鼠标光标放在按钮上时触发。

<button type="button" class="btn btn-lg btn-danger" data-toggle="tooltip" data-animation="true" data-placement="top" data-delay='{"show":1000, "hide":100}' title="Hello, World!">Danger button</button>

样例2：

鼠标移动到按钮上时触发一个带HTML内容的提示框。

<button type="button" class="btn btn-default" data-toggle="tooltip" data-html="true" data-placement="right" title="<em>This</em> <u>is</u> <b>a</b> <i>tooltip</i>">Hover over me</button>

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：BootStrap Tooltip插件源码解析 - Python技术站

BootStrap Tooltip插件源码解析