Debug-027-el-tooltip组件的使用及注意事项

前言：

        这两天，碰到这个饿了么的el-tooltip比较多。这个组件使用起来也挺简单的，常用于展示鼠标 hover 时的提示信息。但是有一些小点需要注意。这里不再机械化的介绍文档，不熟悉的话可以先看一下：

https://element-plus.org/zh-CN/component/tooltip.htmlhttps://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-treeref="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-tooltipplacement="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 = 10const 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。