1.表格tooltip 统一修改
<el-table
:data="tableDatas"
tooltip-effect="light"
.el-tooltip__popper.is-light {
background: #FFF;
box-shadow: 0px 0px 8px 1px rgba(0,0,0,0.16);
border-radius: 4px;
opacity: 1;
border: none;
&[x-placement^=top] .popper__arrow:after {
border-top-color: #fff;
}
&[x-placement^=top] .popper__arrow {
border-top-color: rgba(0,0,0,0.16);
}
}
2.表格加tooltip-effect
<el-table
:data="tableDatas"
:tooltip-effect="'mytooltip'" //重点
>
<el-table-column
prop=".."
label="名称"
:show-overflow-tooltip="true"
></el-table-column>
</el-table>
.is-mytooltip {
background: #fff;
color: #3759af;
border: 1px solid rgb(158, 157, 157);
font-size: 15px;
}
3. 文字提示
<el-tooltip
ref="tlp"
:content="text"
effect="light"
:disabled="!tooltipFlag"
:placement="placement"
:enterable="false"
popper-class="my-pop"
>
<span >{{ text }}</span>
</el-tooltip>
.my-pop.el-tooltip__popper.is-light{
background: #FFF;
//box-shadow: $boxShadow;
filter: drop-shadow(0px 0px 1px rgba(0,0,0,0.16));
border-radius: 4px;
opacity: 1;
border: none;
max-width: 560px;
position: relative;
//三角形颜色修改
&[x-placement^=bottom] .popper__arrow:after{
border-bottom-color: #fff;
}
&[x-placement^=bottom] .popper__arrow{
border-bottom-color: rgba(0,0,0,0.16);
}
}