elementUI tooltip箭头样式(表格自定义)

需求:修改 table 中 tooltip 的样式及位置。

尝试:表格中 tooltip 默认是挂载到 body 中的,修改当前表格 tooltip 样式,全局都会受影响。

求解:自定义表格当前行的 tooltip。

自定义比较简单,直接上代码:

<el-table-column
    prop="explanation"
    label="类型说明"
    width="160"
>
    <template slot-scope="{row}">
        <el-tooltip 
            v-if="row.explanation && row.explanation.length > 10" 
            popper-class="tableTypePopperClass" 
            effect="light" 
            :content="row.explanation" 
            placement="bottom"
        >
            <span ref="tableMemberType" class="typeClass">
                {{ row.explanation }}
            </span>
        </el-tooltip>
        <span v-else>{{row.explanation || "暂无数据"}}</span>
    </template>
</el-table-column>

效果如下: 

修改样式比较重要的一点在于为 tooltip 添加 popper-class 类,popper-class 的作用在于 为 Tooltip 的 popper 添加类名,因为 tooltip 是挂载到body 中的,所以为当前 tooltip 添加 popper-class 类,是为了更方便的修改它。

修改样式重点在于 tooltip 弹出窗中顶部小箭头样式的修改,这一部分是通过 伪类 来实现的,所以需要修改 tooltip 自带的伪类的样式,如下:

  .typeClass {
    display: inline-block;
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .tableTypePopperClass {
    max-width: 500px;
    color: #333!important;
    line-height: 18px!important;
    border: 1px solid #EBEEF5!important;
  }

  // 箭头样式是通过两个样式叠加形成的,内部的三角形,及外部的边线,
  // 所以想要修改小三角的样式需要同时修改内三角及外边线的样式

  // 修改外边线的样式
  .tableTypePopperClass[x-placement^=bottom] .popper__arrow{
    border-bottom-color: #EBEEF5!important;
  }
  // 修改内三角的样式
  .tableTypePopperClass[x-placement^=bottom] .popper__arrow:after {
    border-bottom-color: #FFF!important;
  }

  // 修改tooltip 从顶部弹出时 箭头的样式
  .tableTypePopperClass[x-placement^=top] .popper__arrow{
    border-top-color: #EBEEF5!important;
  }
  .tableTypePopperClass[x-placement^=top] .popper__arrow:after {
    border-top-color: #FFF!important;
  }

^= 选择器  
[attribute^=value] 选择器匹配属性值以指定值开头的每个元素。

解释:

在 tooltip 的 HTML 元素中 placement 属性指代 popper 的弹出位置,修改从下方弹出的 popper 中的箭头的样式时,因为 placement 属性值为 bottom,所以找寻 x-placement 属性值以 bottom 开头的元素,即匹配 x-placement 属性值以 bottom开头的元素,其他原理相同。

  • 1
    点赞
  • 5
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:创作都市 设计师:CSDN官方博客 返回首页
评论

打赏作者

丿刘先森

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值