BootStrap的Tooltip插件源码解析

最新推荐文章于 2021-09-06 14:35:08 发布

益达还有么

最新推荐文章于 2021-09-06 14:35:08 发布

阅读量2.6k

点赞数

分类专栏：插件和框架源码解读文章标签： bootstrap tooltip 源码

本文链接：https://blog.csdn.net/qq_30051139/article/details/53897233

版权

本文探讨了Bootstrap的Tooltip插件，详细介绍了如何利用它实现元素的弹出提示功能，特别是其在不同位置的定位特性。作者在研究源码的过程中学习到定位问题，并分享了学习过程中的知识点，虽然未全面覆盖源码，但仍收获颇丰。

摘要由CSDN通过智能技术生成

Tooltip插件可以让你把要显示的内容以弹出框的形式来展示，如：

这里写图片描述

因为自己在工作的过程中，用到了Tooltip这个插件，并且当时正想学习一下元素定位的问题，如：提示框显示的位置就是触发提示框元素的位置，可以配置在上、下、左、右等位置，所以就去看了源码。对于整个插件源码没有看全，但也学到了许多的知识点。能力有限，可能其中有认识错误的地方，以后再补充吧

1 使用方法不介绍，可以参照

Bootstrap 提示工具（Tooltip）插件

2 源码解析

+function ($) {
   
  'use strict';

  // TOOLTIP PUBLIC CLASS DEFINITION
  // ===============================


  var Tooltip = function (element, options) {
   
    this.type       =
    this.options    =
    this.enabled    =
    this.timeout    =
    this.hoverState =
    this.$element   = null

    this.init('tooltip', element, options)
  }

  Tooltip.VERSION  = '3.3.0'

  Tooltip.TRANSITION_DURATION = 150

  //默认参数
  Tooltip.DEFAULTS = {
    animation: true,
    placement: 'top',
    selector: false,
    template: '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>',
    trigger: 'hover focus',
    title: '',
    delay: 0,
    html: false,
    container: false,
    viewport: {
      selector: 'body',
      padding: 0
    }
  }

  //初始化
  Tooltip.prototype.init = function (type, element, options) {
   
    this.enabled   = true
    this.type      = type
    this.$element  = $(element)
    //初始化参数
    this.options   = this.getOptions(options)

    this.$viewport = this.options.viewport && $(this.options.viewport.selector || this.options.viewport)

    //多个触发器 即触发函数
    var triggers = this.options.trigger.split(' ')


    for (var i = triggers.length; i--;) {
      var trigger = triggers[i]

      if (trigger == 'click') {
        //绑定事件处理程序
        //事件命名空间 'click.tooltip'
        //触发时执行$.proxy(this.toggle, this)返回的函数
        this.$element.on('click.' + this.type, this.options.selector, $.proxy(this.toggle, this))
      } else if (trigger != 'manual') {
        var eventIn  = trigger == 'hover' ? 'mouseenter' : 'focusin'
        var eventOut = trigger == 'hover' ? 'mouseleave' : 'focusout'

        this.$element.on(eventIn  + '.' + this.type, this.options.selector, $.proxy(this.enter, this))
        this.$element.on(eventOut + '.' + this.type, this.options.selector, $.proxy(this.leave, this))
      }
    }

    this.options.selector ?
      (this._options = $.extend({}, this.options, { trigger: 'manual', selector: '' })) :
      this.fixTitle()
  }

  Tooltip.prototype.getDefaults = function () {
   
    return Tooltip.DEFAULTS
  }

  //获得初始化参数
  Tooltip.prototype.getOptions = function (options) {
   
    // this.$element.data() data-key = value 形式的属性获取 
    // 返回一个对象{key:value}
    // options > 元素属性  > 默认  
    options = $.extend({}, this.getDefaults(), this.$element.data(), options)

    //delay 为数字 特殊处理
    //delay 为对象  delay:{ show: 500, hide: 100 }
    if (options.delay && typeof options.delay == 'number') {
      options.delay = {
        show: options.delay,
        hide: options.delay
      }
    }

    return options
  }

  Tooltip.prototype.getDelegateOptions = function () {
   
    var options  = {}
    var defaults = this.getDefaults()

    this._options && $.each(this._options, function (key, value) {
   
      if (defaults[key] != value) options[key] = value
    })

    return options
  }

  //提示框显示
  Tooltip.prototype.enter = function (obj) {
   
    //obj是否是tooltip的实例