1. 介紹

Tooltip常用於展示滑鼠 hover 時的提示信息。

而在實際過程中，有這麼一個需求：只有文字內容排不下，出現省略號，才需要顯示tooltip的提示內容。

本文章的思路是通過一個自定義指令實現如下效果：姓名欄位過長時才顯示tooltip

2. element-ui(vue2版本)

2.1 註冊指令

1) akTooltipAutoShow.js

說明：註冊了一個名稱為 'ak-tooltip-auto-show' 的指令。會根據內容進行判斷是否展示tooltip。

import Vue from 'vue';
import { on, off, getStyle } from 'element-ui/src/utils/dom';

/**
 * ak-tooltip-auto-show
 * 當text沒有被摺疊時，不顯示tooltip
 */
Vue.directive('ak-tooltip-auto-show', {
  inserted: function (el, binding, vnode) {
    el.addEventListener('mouseenter', function (e) {
      let defalutSilent = !!Vue.config.silent;
      Vue.config.silent = true;
      vnode.componentInstance.disabled = true;
      const range = document.createRange();
      range.setStart(el, 0);
      range.setEnd(el, el.childNodes.length);
      const rangeWidth = Math.round(range.getBoundingClientRect().width);
      const padding = (parseInt(getStyle(el, 'paddingLeft'), 10) || 0) + (parseInt(getStyle(el, 'paddingRight'), 10) || 0);
      if (rangeWidth + padding > el.offsetWidth || el.scrollWidth > el.offsetWidth) {
        vnode.componentInstance.disabled = false;
      }
      Vue.config.silent = defalutSilent;
    });
  }
});

2.2 使用

說明：使用<el-tooltip v-ak-tooltip-auto-show>包囊展示的內容。

<div class="details-inner__row">
    <span class="details-inner__row-name">姓名:</span>
    <el-tooltip placement="top" effect="dark" :content="item.name" v-ak-tooltip-auto-show>
        <span class="details-inner__row-value">{{item.name}}</span>
    </el-tooltip>
</div> 

// css
.details-inner__row-value {
　　width: 80%;
　　display: inline-block;
　　white-space: nowrap;
　　text-overflow: ellipsis;
　　overflow: hidden;
}

3. element-plus(vue3版本)

3.1 註冊指令

1) akTooltipAutoShow.js

說明：註冊了一個名稱為 'ak-tooltip-auto-show' 的指令。會根據內容進行判斷是否展示tooltip。

註意：因為element-plus與之前的element-ui不一樣，在element-plus(vue3版本)中是 <展示組件>包含<el-tooltip>的，所以代碼中需要在<展示組件>內查找<el-tooltop>。

import { getStyle } from 'element-plus/lib/utils/dom/index';

/**
 * show-overflow-tooltip for text
 * 當text沒有被摺疊時，不顯示tooltip
 */
const akTooltipAutoShow = {
  created(el, binding, vnode) {
    let tooltipNode = vnode.children.find((childrenCmpt) => childrenCmpt.component?.type.name == 'ElTooltip');
    if (tooltipNode) {
      let { content } = tooltipNode.props;
      if (content && ['添加', '編輯', '刪除','查看'].includes(content)) {
        el.addEventListener('click', function (e) {
          let defalutDisabled = tooltipNode.component.props.disabled;
          if (!defalutDisabled) {
            tooltipNode.component.props.disabled = true;
            setTimeout(() => {
              tooltipNode.component.props.disabled = defalutDisabled;
            }, 200);
          }
        });
      } else {
        el.addEventListener('mouseenter', (e) => {
          tooltipNode.component.props.disabled = true;
          const range = document.createRange();
          range.setStart(el, 0);
          range.setEnd(el, el.childNodes.length);
          const rangeWidth = Math.round(range.getBoundingClientRect().width);
          const padding = (parseInt(getStyle(el, 'paddingLeft'), 10) || 0) + (parseInt(getStyle(el, 'paddingRight'), 10) || 0);
          if (rangeWidth + padding > el.offsetWidth || el.scrollWidth > el.offsetWidth) {
            tooltipNode.component.props.disabled = false;
          }
        });
      }
    }
  }
};

export default akTooltipAutoShow;

2) 進行局部或全局註冊

// main.js
const app = createApp(App);
import akTooltipAutoShow from './akTooltipAutoShow.js';
app.directive('ak-tooltip-auto-show', akTooltipAutoShow);

3.2 使用

說明：因element-plus(vue3版本)本身不提供 root element，所以需要把此指令放到<el-tooltip>的父級組件。

<div class="details-inner__row">
　　<span class="details-inner__row-name">姓名:</span>
　　<span class="details-inner__row-value" v-ak-tooltip-auto-show>
　　　　<el-tooltip placement="top-end" :content="item.name">{{item.name}}</el-tooltip>
　　</span>
</div> 


// css
.details-inner__row-value {
　　width: 80%;
　　display: inline-block;
　　white-space: nowrap;
　　text-overflow: ellipsis;
　　overflow: hidden;
}