popper.js——tooltip文档及源码分析

最新推荐文章于 2024-09-20 19:47:55 发布
最新推荐文章于 2024-09-20 19:47:55 发布
阅读量9.1k 收藏 10
点赞数 3
分类专栏： javascript 文章标签： popper tooltip
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shijue98/article/details/85227549
版权

popper.js之tooltip文档及源码分析

popper说明

由于popper.js这个名字比较大众化，有必要说明一下具体指的是哪一个；
没错就是你想的这个：
https://popper.js.org/tooltip-examples.html
https://github.com/FezVrasta/popper.js

popper 是一个定位引擎，就是说他只做一件事使指定节点定位到指定位置。至于DOM的显示、隐藏、内容、外观、丑美胖瘦……他都不管

那tooltip.js和popper是什么关系呢？
可以说是理论与实践的关系，tooltip是对popper的具体应用。想想是不是很兴奋，什么下拉菜单、select表单模拟、提示工具……总之，一切弹出定位的UI组件都可以通过这个引擎实现。

tooltip文档简单说明

调用方式

new Tooltip(element,options);

参数说明

element

  • DOM节点 ：如 document.getElementById(el)
  • jquery 对象 : 如 $(el) , 默认 取第0个元素

options
选项既可以在js初始化时传入，也可以在元素上通过data-绑定

选项类型说明值
placementString弹出位置默认：bottom；top(-start, -end), right(-start, -end), bottom(-start, -end), left(-start, -end)
arrowSelectorString设置三角的class默认：.tooltip-arrow, .tooltip__arrow
innerSelectorString设置内容容器的class默认：.tooltip-inner, .tooltip__inner
containerHTMLElement、String、false将tooltip元素插入到container元素默认：false （参照元素的父节点）
delayNumber、Object延迟显示或隐藏 ，不适用手动触发类型；默认：0；如果是一个值（Number），同时被应用到显示和隐藏；如果是对象{ show: 500, hide: 100 },则分别被应用到显示和隐藏
htmlBoolean把title中的内容以text（false）或者html（true）格式插入到tooltip-inner里默认：false
templateString插入的模板内容默认：<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>
titleString、HTMLElement、TitleFunction弹出的具体内容title
triggerString触发方式：多种触发方式，中间用空格隔开；manual 手动，不能与其他方式组合使用；默认：hover focus；可选hover、focus、click、manual
closeOnClickOutsideBoolean是否在点击弹出元素和参照元素以外，关闭弹出元素；只适用于click方式默认：false
boundariesElementString、HTMLElement设置弹出元素的边界
offsetString、Number相对参照元素的偏移量设置默认：0
popperOptionsObject直接设置popper实例的选项

tooltip源码注释

import Popper from 'popper.js';
import isFunction from '../../popper/src/utils/isFunction';

const DEFAULT_OPTIONS = {
  container: false,
  delay: 0,
  html: false,
  placement: 'top',
  title: '',
  template:
    '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>',
  trigger: 'hover focus',
  offset: 0,
  arrowSelector: '.tooltip-arrow, .tooltip__arrow',
  innerSelector: '.tooltip-inner, .tooltip__inner',
};

export default class Tooltip {

  constructor(reference, options) {
    // apply user options over default ones
    // 用户选项覆盖默认选项
    options = { ...DEFAULT_OPTIONS, ...options };

    // 如果是jq对象，取第一个————转成js节点
    reference.jquery && (reference = reference[0]);

    // cache reference and options
    // 缓存参照元素和选项
    this.reference = reference;
    this.options = options;

    // get events list  
    // 获取触发方式的数组列表
    // events 是数组，触发事件的数组
    const events =
      typeof options.trigger === 'string'
        ? options.trigger
            .split(' ')
            .filter(
              trigger => ['click', 'hover', 'focus'].indexOf(trigger) !== -1
            )
        : [];

    // set initial state
    // 设置出事状态
    // 显示或隐藏。默认隐藏
    this._isOpen = false;
    // Popper实例选项
    this._popperOptions = {};

    // set event listeners
    // 设置事件监听
    this._setEventListeners(reference, events, options);
  }

  //
  // Public methods
  //

  /**
   * Reveals an element's tooltip. This is considered a "manual" triggering of the tooltip.
   * Tooltips with zero-length titles are never displayed.
   * @method Tooltip#show
   * @memberof Tooltip
   */
   // manual 手动触发
  show = () => this._show(this.reference, this.options);

  /**
   * Hides an element’s tooltip. This is considered a “manual” triggering of the tooltip.
   * @method Tooltip#hide
   * @memberof Tooltip
   */
   // manual 手动触发
  hide = () => this._hide();

  /**
   * Hides and destroys an element’s tooltip.
   * @method Tooltip#dispose
   * @memberof Tooltip
   */
   // manual 手动触发
  dispose = () => this._dispose();

  /**
   * Toggles an element’s tooltip. This is considered a “manual” triggering of the tooltip.
   * @method Tooltip#toggle
   * @memberof Tooltip
   */
   // manual 手动触发
  toggle = () => {
    if (this._isOpen) {
      return this.hide();
    } else {
      return this.show();
    }
  };

  /**
   * Updates the tooltip's title content
   * @method Tooltip#updateTitleContent
   * @memberof Tooltip
   * @param {String|HTMLElement} title - The new content to use for the title
   */
   // manual 手动触发
  updateTitleContent = (title) => this._updateTitleContent(title);

  //
  // Private methods
  //
  // 私有方法列表

  _events = [];

  /**
   * Creates a new tooltip node
   * @memberof Tooltip
   * @private
   * @param {HTMLElement} reference
   * @param {String} template
   * @param {String|HTMLElement|TitleFunction} title
   * @param {Boolean} allowHtml
   * @return {HTMLElement} tooltipNode
   */
  _create(reference, template, title, allowHtml) {
    // create tooltip element
    // 创建一个div元素，里面插入template内容
    const tooltipGenerator = window.document.createElement('div');
    tooltipGenerator.innerHTML = template.trim();
    // 获取到模板中的第一个子节点————class=“tooltip”
    const tooltipNode = tooltipGenerator.childNodes[0];

    // add unique ID to our tooltip (needed for accessibility reasons)
    // 给class=“tooltip”添加一个随机ID
    tooltipNode.id = `tooltip_${Math.random()
      .toString(36)
      .substr(2, 10)}`;

    // set initial `aria-hidden` state to `false` (it's visible!)
    // 设置属性为可见的
    tooltipNode.setAttribute('aria-hidden', 'false');

    // add title to tooltip
    // 获取title节点，————tooltip-inner（现在里面是空的）
    const titleNode = tooltipGenerator.querySelector(this.options.innerSelector);
    // 给title节点添加内容
    this._addTitleContent(reference, title, allowHtml, titleNode);

    // return the generated tooltip node
    // 返回新创建div里的内容，也就是class tooltip 节点
    return tooltipNode;
  }

  _addTitleContent(reference, title, allowHtml, titleNode) {
    if (title.nodeType === 1 || title.nodeType === 11) {
      // if title is a element node or document fragment, append it only if allowHtml is true
      // 如果title内容是元素节点或者 #document 片段 
      // 如果option.html=true，允许插入html类型
      // 把title内容插入title节点（tooltip-inner）
      allowHtml && titleNode.appendChild(title);
    } else if (isFunction(title)) {
      // if title is a function, call it and set textContent or innerHtml depending by `allowHtml` value
      // 如果title是一个函数；
      // titleText 调用函数,并且把this指向参照元素，获取title函数的返回值，
      const titleText = title.call(reference);
      // 如果option.html=true，允许插入html类型--> 则插入title的所有内容；
      // 否则插入title中的所有文本，包括<style>和display:none中的文本
      allowHtml
        ? (titleNode.innerHTML = titleText)
        : (titleNode.textContent = titleText);
    } else {
      // if it's just a simple text, set textContent or innerHtml depending by `allowHtml` value
      // 如果不是元素也不是函数，根据option.html类型插入
      allowHtml ? (titleNode.innerHTML = title) : (titleNode.textContent = title);
    }
  }

  _show(reference, options) {
    // don't show if it's already visible
    // or if it's not being showed
    // 如果实例是显示状态 且 不是正在显示中，则return
    if (this._isOpen && !this._isOpening) {
      return this;
    }

    // 设置实例为显示状态
    this._isOpen = true;

    // if the tooltipNode already exists, just show it
    // 如果tooltip节点存在，则显示他
    if (this._tooltipNode) {
      this._tooltipNode.style.visibility = 'visible';
      this._tooltipNode.setAttribute('aria-hidden', 'false');
      this.popperInstance.update();
      return this;
    }

    // tooltip节点不存在时

    // get title 获取title从参照元素的属性中或者选项中
    const title = reference.getAttribute('title') || options.title;

    // don't show tooltip if no title is defined
    // 如果title为空，则return，不显示，不创建节点
    if (!title) {
      return this;
    }

    // create tooltip node
    // 创建tooltip节点
    const tooltipNode = this._create(
      reference,
      options.template,
      title,
      options.html
    );

    // Add `aria-describedby` to our reference element for accessibility reasons
    // 给参照元素设置tooltip的对应ID
    reference.setAttribute('aria-describedby', tooltipNode.id);

    // append tooltip to container
    // 把创建的tooltip元素，插入到指定容器

    // 根据options.container 获取插入的指定容器
    // ————如果option.container 是一个字符串，则获取这个元素，（可能为空）
    // ————如果是默认值，false，则是参照元素的父节点
    const container = this._findContainer(options.container, reference);

    // tooltipNode 插入 container
    this._append(tooltipNode, container);

    // 设置popper实例的选项

    // 选项中配置的popper实例选项和配置的方位选项
    this._popperOptions = {
      ...options.popperOptions,
      placement: options.placement,
    };
    // modifiers 调节器
    this._popperOptions.modifiers = {
      ...this._popperOptions.modifiers,
      arrow: {
        element: this.options.arrowSelector,
      },
      offset: {
        offset: options.offset,
      },
    };

    // 通过 modifiers 调节器设置，元素边界
    if (options.boundariesElement) {
      this._popperOptions.modifiers.preventOverflow = {
        boundariesElement: options.boundariesElement,
      };
    }

    //  popper 实例
    this.popperInstance = new Popper(
      reference,
      tooltipNode,
      this._popperOptions
    );

    // 把弹出tooltip节点，添加到tooltip实例 
    this._tooltipNode = tooltipNode;

    return this;
  }

  _hide(/*reference, options*/) {
    // don't hide if it's already hidden
    // 如果是隐藏状态，则return
    if (!this._isOpen) {
      return this;
    }
    // 设置状态，为隐藏
    this._isOpen = false;

    // hide tooltipNode
    // 隐藏节点
    this._tooltipNode.style.visibility = 'hidden';
    this._tooltipNode.setAttribute('aria-hidden', 'true');

    return this;
  }

  _dispose() {
    // remove event listeners first to prevent any unexpected behaviour
    this._events.forEach(({ func, event }) => {
      this.reference.removeEventListener(event, func);
    });
    this._events = [];

    if (this._tooltipNode) {
      this._hide();

      // destroy instance
      this.popperInstance.destroy();

      // destroy tooltipNode if removeOnDestroy is not set, as popperInstance.destroy() already removes the element
      if (!this.popperInstance.options.removeOnDestroy) {
        this._tooltipNode.parentNode.removeChild(this._tooltipNode);
        this._tooltipNode = null;
      }
    }
    return this;
  }

  _findContainer(container, reference) {
    // if container is a query, get the relative element
    // 如果option.container 是一个字符串，则获取这个元素，（可能为空）
    if (typeof container === 'string') {
      container = window.document.querySelector(container);
    } else if (container === false) {
      // if container is `false`, set it to reference parent
      // 如果是默认值，false，则是参照元素的父节点
      container = reference.parentNode;
    }
    // 其他情况未做过滤处理，直接返回
    // container 值只能是惟一的，不可能同时找到多个元素节点
    return container;
  }

  /**
   * Append tooltip to container
      把节点插入到容器
   * @memberof Tooltip
   * @private
   * @param {HTMLElement} tooltipNode
   * @param {HTMLElement|String|false} container

   */
  _append(tooltipNode, container) {
    container.appendChild(tooltipNode);
  }

  _setEventListeners(reference, events, options) {

    // 储存触发方式事件列表
    // 显示事件列表
    const directEvents = [];
    // 隐藏事件列表
    const oppositeEvents = [];

    events.forEach(event => {
      switch (event) {
        case 'hover':
          directEvents.push('mouseenter');
          oppositeEvents.push('mouseleave');
          break;
        case 'focus':
          directEvents.push('focus');
          oppositeEvents.push('blur');
          break;
        case 'click':
          directEvents.push('click');
          oppositeEvents.push('click');
          break;
      }
    });

    // schedule show tooltip
    // 根据触发事件，设置tooltip显示
    directEvents.forEach(event => {
      // 事件监听，执行函数
      const func = evt => {
        // evt 进入时，事件
        // 如果参照元素是 正在 显示过程 状态，则return
        if (this._isOpening === true) {
          return;
        }
        // 如果显示与隐藏是同一个事件，表示当前事件已被占用（click）
        evt.usedByTooltip = true;

        // 触发tooltip显示，设置延时显示
        this._scheduleShow(reference, options.delay, options, evt);
      };

      // 将触发事件和对应方法，保存到_events数组；
      this._events.push({ event, func });

      // 对参照元素设置，触发事件监听
      reference.addEventListener(event, func);
    });

    // schedule hide tooltip
    // 根据触发事件，设置tooltip隐藏
    oppositeEvents.forEach(event => {
      // 事件监听，执行函数
      const func = evt => {
        // evt 离开时，事件
        
        // 如果事件被显示占用，则return
        if (evt.usedByTooltip === true) {
          return;
        }
        // 触发tooltip隐藏，设置延时隐藏
        this._scheduleHide(reference, options.delay, options, evt);
      };

      // 将触发事件和对应方法，保存到_events数组；
      this._events.push({ event, func });

      // 对参照元素设置，触发事件监听
      reference.addEventListener(event, func);

      // 在触发事件为click的情况下，判断是否可以，通过点击tooltip和参照元素以外的地方，关闭tooltip
      if (event === 'click' && options.closeOnClickOutside) {
        // 在document上监听鼠标按下事件
        document.addEventListener('mousedown', e => {
          // 如果是关闭状态，则return
          if (!this._isOpening) {
            return;
          }
          // popper弹出元素
          const popper = this.popperInstance.popper;
          // 如果 点击在参照元素上或者在popper上，则return
          if (reference.contains(e.target) ||
              popper.contains(e.target)) {
            return;
          }
          // 打开状态，且click在元素外，去隐藏
          func(e);
        }, true);
      }
    });
  }

  _scheduleShow(reference, delay, options /*, evt */) {
    // 设置实例状态为true---打开（开始显示，或正在显示的过程中）
    this._isOpening = true;
    // defaults to 0
    // 延迟时间，默认0
    const computedDelay = (delay && delay.show) || delay || 0;

    // this._showTimeout 显示的setTimeout延迟对象
    this._showTimeout = window.setTimeout(
      () => this._show(reference, options),
      computedDelay
    );
  }

  _scheduleHide(reference, delay, options, evt) {
    // 设置实例状态为false---隐藏（开始隐藏，或正在隐藏的过程中）
    this._isOpening = false;
    // defaults to 0
    // 获取延时时间，默认为0
    const computedDelay = (delay && delay.hide) || delay || 0;

    // 延时隐藏
    window.setTimeout(() => {
      // 把正在显示的tooltip节点（还未显示），清除关闭
      window.clearTimeout(this._showTimeout);
      // 如果是关闭状态则return
      if (this._isOpen === false) {
        return;
      }
      // 如果tooltip节点不存在，则return
      if (!document.body.contains(this._tooltipNode)) {
        return;
      }

      // if we are hiding because of a mouseleave, we must check that the new
      // reference isn't the tooltip, because in this case we don't want to hide it
      // 如果根据mouseleave去隐藏
      // 就必须判断，从参照元素移入的元素是不是tooltip节点；
      if (evt.type === 'mouseleave') {
        const isSet = this._setTooltipNodeEvent(evt, reference, delay, options);

        // if we set the new event, don't hide the tooltip yet
        // the new event will take care to hide it if necessary
        // 如果移入的是tooltip节点，则不隐藏
        if (isSet) {
          return;
        }
      }

      this._hide(reference, options);
    }, computedDelay);
  }

  _setTooltipNodeEvent = (evt, reference, delay, options) => {

    // 移入的元素，可能是tooltip元素，也可能是其他元素，总之不应该是参照元素
    const relatedreference =
      evt.relatedreference || evt.toElement || evt.relatedTarget;

    const callback = evt2 => {
      // 从tooltip节点上移出，进入的元素
      const relatedreference2 =
        evt2.relatedreference || evt2.toElement || evt2.relatedTarget;

      // Remove event listener after call
      // 移出取消对tooltip节点的监听
      this._tooltipNode.removeEventListener(evt.type, callback);

      // If the new reference is not the reference element
      // 如果移到的这样元素不是参照元素，则去隐藏
      if (!reference.contains(relatedreference2)) {
        // Schedule to hide tooltip
        this._scheduleHide(reference, options.delay, options, evt2);
      }
    };

    // 如果tooltip节点包含这个移入的元素，也就是说从参照元素出到tooltip上了
    if (this._tooltipNode.contains(relatedreference)) {
      // listen to mouseleave on the tooltip element to be able to hide the tooltip
      // 在tooltip节点上添加mouseleave事件监听
      this._tooltipNode.addEventListener(evt.type, callback);
      return true;
    }

    return false;
  };

  _updateTitleContent(title) {
    // 如果tooltip节点，不存在（实例已生成，但是还没生成节点）
    // 如果选项中存在title属性，就把title保存到实例中
    if(typeof this._tooltipNode === 'undefined') {
      if(typeof this.options.title !== 'undefined') {
        this.options.title = title;
      }
      return;
    }
    // 如果节点存在
    // 清空节点中内容，给节点重新赋值，并保存到实例选项中
    // popper 更新
    const titleNode = this._tooltipNode.parentNode.querySelector(this.options.innerSelector);
    this._clearTitleContent(titleNode, this.options.html, this.reference.getAttribute('title') || this.options.title)
    this._addTitleContent(this.reference, title, this.options.html, titleNode);
    this.options.title = title;
    this.popperInstance.update();
  }
  // 清空节点中内容
  _clearTitleContent(titleNode, allowHtml, lastTitle) {
    if(lastTitle.nodeType === 1 || lastTitle.nodeType === 11) {
      allowHtml && titleNode.removeChild(lastTitle);
    } else {
      allowHtml ? titleNode.innerHTML = '' : titleNode.textContent = '';
    }
  }

}

jquery 简单调用

function tips(selector,option){
    $(selector).each(function(){
       new Tooltip(this,option）
    })
}
popper.js轻量级提示插件
08-15
分享一个轻量级Popper.js提示插件。它是一个扩展性较好的JS插件。不需要依赖 jQuery 库，大小仅为 3.5KB 左右，我上传的这个不是压缩版，所以有53KB，使用与配置相当简单，若你的 Web 网站有这个需要，可以尝试使用这个该特效插件。
快速上手 Popper.js
文摘资讯
12-26 1525
Popper.js是一个用于解决定位和交互问题的JavaScript库。它主要用于在网页中创建弹出窗口、下拉菜单、工具提示等元素，并确保它们正确地定位和与其他元素进行交互。Popper.js的主要功能包括：1、 弹出窗口定位：Popper.js可以帮助你将弹出窗口定位到目标元素的附近，例如在按钮旁边显示一个下拉菜单或工具提示。它使用计算和定位算法来确保弹出窗口在不同屏幕尺寸和滚动情况下都能正确地定...
Bootstrap下拉菜单需要Popper.js（popper.js下载）
最新发布
gitblog_06570的博客
09-20 599
Bootstrap下拉菜单需要Popper.js（popper.js下载） 项目地址:https://gitcode.com/Resource-Bundle-Collection/a0252 介绍 本仓库提供了一个资源文件的下载，该资源文件是用于解决Bootstrap下拉菜单（dropdown）功能所需的Popper.js库。Popper.js是一个轻量级的JavaScript库，主要用于实现依赖...
popper.js(bootstrap里面扩展功能要用到的插件)
08-22
bootstrap里面要用到的插件,同时也是支持bootstrap的扩展功能必要的
ToolTip_JS
norsd的专栏
10-02 1472
//SCRIPT_START//#namespace SysToolfunction _toolTip( id, nLayerNumber, oParent ){      this.oToolTip = document.createElement(div);     SysTool.addProperty(this.oToolTip.style,["display@none","posit
popper.js 使用
热门推荐
站在原型链顶端的男人
05-15 6万+
Popper.js是一款功能强大的JS定位引擎。最近在写tooltip弹窗时，需要用到提示框定位的问题，然后度娘推荐我使用popper.js库，查看了iview库和element库的源码，发现定位都是用的这个玩意儿。既然大佬们都在用这个，我也去Popper.js官网瞅了下，没有中文文档，不得不吐槽一下。然后就是demo也少的可怜，而且网上的教程也比较少。于是就手敲了一遍这个库的使用属性及方法，相关...
js tooltip
11-19
javascript tooltip jquery tooltip demo js tooltip javascript tooltip demo
tooltip.css-2.0文档
weixin_30706507的博客
04-19 79
tooltip.css 纯CSS鼠标提示工具。 v. 2.0.0 更新日期：2018.4.12 预览DEMO。 安装： 只需在页面中引入"tooltip.css"或“tooltip.min.css”文件即可。 如： <link rel="stylesheet" href="css/tooltip.css" /> <--or(或）--&...
popper.js.1.14.3.rar
09-09
Popper.js是一款强大的JavaScript库，其主要功能是管理和优化页面上的弹出元素，如下拉菜单、提示框、模态对话框等。在给定的压缩包文件"popper.js.1.14.3.rar"中，包含了该库的1.14.3版本，这个版本被广泛用于...
popper.min.js.map
06-11
包含：popper.min.js.map、popper.min.js....其实可以直接输入网址<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> 中的网址另存为，或者直接复制网页代码另存为，map文件就是...
popper2-api-plugin:提供Popper.js 2（https
04-05
Popper.js Jenkins插件 为Jenkins插件提供 。 Popper只需一行代码即可轻松定位工具提示，弹出窗口或其他任何内容。 该插件包含最新的版本和相应的Jenkins UI元素。 如何使用插件 为了使用此JS库，请向您的pom...
jquery.tooltip.js
03-03
jquery插件，tooltip提示文字。
前端项目-popper.js.zip
09-02
前端项目-popper.js,A kickass library to manage your poppers
强大的JS Tooltip工具
04-11
NULL 博文链接：https://lj6684.iteye.com/blog/1677701
popper.js-1.12.3
11-24
Bootstrap4还需要一个名为Popper 的库，支持bootstrap的扩展功能，官网好像不能下载了
popper.js-master
03-28
在过去，我为了在web app中更好地定位我的tooltips和popover，我会花几个小时写同样的一段代码，不断进行微调。每次我开始一个新的项目，总会根据不同的环境对定位有不同的需求。这种繁琐直到我用emberjs开发一个大型应用时达到极致，这个项目中由于比较烂的UX设计决定，几乎她想在每个元素上都支持hover出现一个popover! 在这个大项目中，我们开始使用bootstrap3的tooltip，并不断地通过hack代码来实现新的功能。
popper.min.js
01-15
版本1.14.6 2018最新版bootstrap4所需的popper.min.js，支持bootstrap的扩展功能
Bootstrap JavaScript插件：工具提示（tooltip.js）
WangMin@汪末末
09-09 1461
作者:WangMin 格言:努力做好自己喜欢的每一件事 CSDN原创文章 博客地址 ???? WangMin Bootstrap 提示工具（Tooltip）插件工具可以通过鼠标移动到选定的特定的元素上时，显示出相关的提示语。当您想要描述一个链接的时候，提示工具（Tooltip）就显得非常有用。提示工具（Tooltip）插件做了很多改进，例如不需要依赖图像，而是改用 CSS 实现动画效果，用 data 属性存储标题信息。 静态样式： 用法 提示工具（Tooltip）插件根据需求生成内容和标记，默认情况下是
Popper.js：ElementUI 中采用弹出，提示框库，好用的没朋友。
贝格前端工场的博客
02-11 1453
Hi，我贝格前端工场，继续介绍经典的js库，ElementUI 中Tooltip、Select、Cascader、TimePicker等组件中怎么把提示框定位到目标元素的，是用 Popperjs 来实现。
.el-tooltip__popper .popper__arrow yanse
11-18
"el-tooltip__popper .popper__arrow 的颜色可以通过CSS来进行设置。可以使用CSS的属性来指定该元素的背景颜色、字体颜色、边框颜色等。比如可以使用 background-color 属性来设置背景颜色，color 属性来设置字体颜色，border-color 属性来设置边框颜色等。也可以使用渐变色或者图片作为背景来丰富该元素的样式。另外，也可以通过box-shadow属性来添加阴影效果，通过border-radius属性来设置圆角等。总之，对于 el-tooltip__popper .popper__arrow 的样式设置，可以根据具体的需求和设计来灵活运用CSS来进行调整和美化。这样就能使该元素更符合页面的整体风格，提升用户体验。"
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

了 义

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值