前言：
这两天，碰到这个饿了么的el-tooltip比较多。这个组件使用起来也挺简单的，常用于展示鼠标 hover 时的提示信息。但是有一些小点需要注意。这里不再机械化的介绍文档，不熟悉的话可以先看一下：
https://element-plus.org/zh-CN/component/tooltip.html
https://element-plus.org/zh-CN/component/tooltip.html
（1）定制化样式：
建议看一下这个，因为我们项目中并没有使用默认的样式，而是对el-tooltip有定制化的内容，在全局中设置统一的样式，这个案例需要各位参考一下：
（2） 悬浮显示的内容content是可以采用插槽slot的形式的，这样就比较灵活。参考这个：
下面两个属性是我才知道的：
（3）支持disabled控制Tooltip 组件是否禁用
（4）show-after：可以控制悬浮几秒之后才显示提示信息。个人觉得这个属性很贴心，因为鼠标快速移动会有很多Tooltip被触发，这会让列表显示很乱，因为这个触发很快。设置延迟就会效果很好。
使用el-tooltip配合（3）（4）两个属性在el-tree中可以实现当某一层级字数过多，对名称有一个缩写，并且悬浮显示全部名称的效果，这里还配合使用了动态样式使用getWidth()方法。
<el-tree
ref="treeRef"
class="flow-tree"
:data="treeData"
:props="defaultProps"
node-key="name"
expand-on-click-node
:current-node-key="currentNodeKey"
:default-expanded-keys="treeNodeArr"
highlight-current
:filter-node-method="filterNode"
@node-click="handleTreeClick"
>
<!-- `${130 + node.level * 10}px` -->
<template #default="{ node, data }">
<div class="tree-label">
<!-- <div class="name" :style="{ width: getWidth(node) }" :title="node.label">
{{ ellipsis(node) }}
</div> -->
<el-tooltip
placement="top-start"
effect="customized"
:show-after="1000"
:content="node.label"
:disabled="node.label.length <= 13"
:enterable="false"
>
<span class="name" :style="{ width: getWidth(node) }">{{ node.label.length > 13 ? `${node.label.slice(0, 13)}...` : node.label }}</span>
</el-tooltip>
<div>
<span v-if="data.name !== '未分组' && data.level !== 5" v-authorize="141">
<circle-plus class="el-icon-delete" @click.stop="append(node, data)" />
</span>
<span v-if="data.name !== '未分组'" v-authorize="143">
<delete class="el-icon-delete" style="margin-left: 10px;" @click.stop="remove(node, data)" />
</span>
</div>
</div>
</template>
</el-tree>
function getWidth(node:any) {
const temp = 10
const width = 150 + (node.level === 1 ? 5 * temp : node.level === 2 ? 4 * temp : node.level === 3 ? 3 * temp : node.level === 4 ? 2 * temp : node.level === 5 ? 1 * temp : 0)
return `${width}px`
}
效果大致如下：
这里其实还可以被优化。
（5）Popover 和Tooltip 是有相似的属性的，你可以尝试把Popover的属性用在Tooltip上，说不定可以成功。不过我忘记是什么属性了。没事儿可以试一下。
（6）项目中还遇到一个问题我想也可以放在这里讲：
在el-table组件中其实是有这两个属性使用的。当然也要配合show-overflow-tooltip属性去使用。
这里我想说的是，当我们的表格中的某一列单元格的内容超级多的时候，肯定是需要设置show-overflow-tooltip实现鼠标悬浮显示全部信息的。
但是默认的悬浮提示框，会撑满整个屏幕：
这里也调研了一会儿，需要使用万能的CSS：
.is-dark{
max-width: 30%;
}这里因为tooltip-effect的默认样式就是dark，这个样式找了很久，最开始没注意到。让它的宽度最大30%
tooltip-effect属性默认是使用dark的，所以这里需要用is-dark，如果是light估计样式就会是is-light。
