el-table中使用show-overflow-tooltip属性,配合tooltip出现的浏览器兼容性问题
el-table中使用show-overflow-tooltip属性内容过长被隐藏时显示 tooltip,使用了作用域插槽的模板,那么show-overflow-tooltip设置的显示tooltip内容只作用到下一级的div内容
<template slot-scope="scope">
<el-tooltip placement="top">
<div slot="content" class=“di'v”>
内容
</div>
</el-tooltip>
</template>
<template slot-scope="scope">后 需要在div 将内容显示tooltip上的标签设置overflow:hidden;text-overflow:ellipsis; 例如上述class名为div的元素
设置这些样式之后,谷歌上显示是正常的,但是火狐上显示会出问题 无法显示出tooltip
思路:
仔细查看渲染后的属性,对比两个浏览器显示的样式区别,谷歌内容显示层都被设定了display: block; 而火狐没有设定
解决方案
将其统一改为display: inline;火狐和IE可以正常显示tooltip
posted on
浙公网安备 33010602011771号