网络营销网站建设论文交互设计师和ui设计师的区别
前言：
这两天，碰到这个饿了么的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-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。
