element-ui中Tooltip文字提示——el-tooltip的样式修改

修改el-tooltip的背景颜色

注意:以下修改都需要在全局样式修改,因为这个组件的层级,并不是在你使用他的地方,而是和你的app同一层级,所以在当前使用的地方找不到tip提示的dom节点。

修改提示框中长方形框的背景颜色
.el-tooltip__popper{
        background: rgba(0,0,0,0.65) !important;
    }
修改提示框中的小三角的边框颜色
// 注意[^=top]是下三角 即提示框在上方  若提示框在下方则[^=bottom] 
.el-tooltip__popper[x-placement^=top] .popper__arrow:after{
        border-top-color:  #595959 !important;
    }
  • 2
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
修改el-tooltip样式,可以通过添加popper-class属性来给组件添加一个选择器名,然后在全局样式修改该选择器的样式。首先,在el-tooltip标签添加popper-class属性,比如popper-class="testtooltip"。然后,在全局样式添加一个样式标签,将需要修改样式写在其。注意,这些样式不能写在scoped样式标签里,需要重新写一个样式标签单独放。比如: ```html <el-tooltip placement="bottom" popper-class="testtooltip"> <div slot="content"> ceshi </div> <el-button>Dark</el-button> </el-tooltip> <style lang="less"> /* 修改箭头颜色 */ .el-tooltip__popper\[x-placement^="bottom"\] .popper__arrow { border-bottom-color: white!important; } .el-tooltip__popper\[x-placement^="bottom"\] .popper__arrow:after { border-bottom-color: white !important; } /* 修改内容背景颜色 */ .testtooltip { background: white !important; box-shadow: 1px 1px 10px 3px #D3D3D6; } </style> ``` 如果要修改提示长方形框的背景颜色,可以使用以下样式: ```css .el-tooltip__popper { background: rgba(0,0,0,0.65) !important; } ``` 如果要修改提示的小三角的边框颜色,可以使用以下样式: ```css /* 注意\[^=top\]是下三角,即提示框在上方,若提示框在下方则使用\[^=bottom\] */ .el-tooltip__popper\[x-placement^=top\] .popper__arrow:after { border-top-color: #595959 !important; } ``` 需要注意的是,以上修改都需要在全局样式进行,因为el-tooltip组件的层级并不是在你使用它的地方,而是和你的app同一层级,所以在当前使用的地方找不到提示框的DOM节点。 #### 引用[.reference_title] - *1* *2* [el-tooltip 如何修改样式](https://blog.csdn.net/coderhhan/article/details/109220682)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [element-uiTooltip文字提示——el-tooltip样式修改](https://blog.csdn.net/mongchu/article/details/126622774)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值