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-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。