element-ui 表格和 tooltip修改背景颜色和箭头颜色

简介: element-ui 表格和 tooltip修改背景颜色和箭头颜色

1、element-ui tooltip 文字提示 背景修改:

第一步:(先给tooltip设置class:popper-class防止其他部分的样式被覆盖,如下所示;)

<el-tooltip popper-class="tps" enterable content="这是提示内容。"placement="bottom">
  <i class="el-icon-warning-outline"></i>
</el-tooltip>

第二步:(以下代码根据实际情况,任选一个即可;)

.tps.el-tooltip__popper {
      background: red;
    }
// 深色系可以添加一个类 is-dark
.tps.el-tooltip__popper.is-dark {
      background: red;
    }
// 系可以添加一个类 is-light
.tps.el-tooltip__popper.is-light {
      background: red;
    }

 

2、element-ui tooltip 文字提示 三角形颜色修改

   说明: .el-tooltip__popper[x-placement^=“方向”] .popper__arrow:after

                border-方向-color: red

               .el-tooltip__popper[x-placement^=“方向”] .popper__arrow

               border-方向-color: red

代码如下:(注意:如果有背景色,请将透明度分开写,如下所示)

.el-tooltip__popper[x-placement^="top"] .popper__arrow:after,
    .el-tooltip__popper[x-placement^="top"] .popper__arrow {
      border-top-color: red;
      opacity: 0.5;
    }

3、el-table中里面的show-overfloe-tooltip修改样式

<el-table
        :data="tableData"
        :max-height="'753'"
        :tooltip-effect="'tooltipStyle’”     //重点
      >
        <el-table-column
          prop="replacereason"
          label="更改原因"
          :show-overflow-tooltip="true"
        ></el-table-column>
</el-table>
.is-tooltipStyle {
  background: #fff;
  color: #3759af;
  border: 1px solid rgb(158, 157, 157);
  font-size: 15px;
}
目录
打赏
0
0
0
0
12
分享
相关文章
|
3月前
|
「Mac畅玩鸿蒙与硬件34」UI互动应用篇11 - 颜色选择器
本篇将带你实现一个颜色选择器应用。用户可以从预设颜色中选择,或者通过输入颜色代码自定义颜色来动态更改界面背景。该应用展示了如何结合用户输入、状态管理和界面动态更新的功能。
76 3
「Mac畅玩鸿蒙与硬件34」UI互动应用篇11 - 颜色选择器
element-ui table表格多选后再打开默认选中
element-ui table表格多选后再打开默认选中
element-ui 表格数据究竟隐藏着怎样的神秘样式与格式化技巧?快来揭开谜底!
【8月更文挑战第22天】《element-ui 表格数据样式及格式化案例》展示了如何利用 element-ui 的表格组件实现美观且易读的数据展示。通过简单配置,可以自定义表格样式,如边框、背景色等,并通过 formatter 实现数据格式化,例如将成绩保留一位小数。此外,还能依据条件设置行样式,如成绩达优则高亮显示,从而增强用户体验和数据可读性。
109 1
ElementUI——vue2+element-ui 2.x的动态表格和表单
ElementUI——vue2+element-ui 2.x的动态表格和表单
211 1
Element UI & Element Plus之改变表格单元格颜色
这篇文章展示了如何在Element UI和Element Plus框架中使用`:cell-style`属性来根据条件改变表格单元格的颜色。
598 0
Element UI & Element Plus之改变表格单元格颜色
Element-ui Table表格导出功能的实现
Element-ui Table表格导出功能的实现
125 0
|
8月前
Element UI 表格【列宽自适应】
Element UI 表格【列宽自适应】
185 0
|
8月前
Element UI 【表格合计】el-table 实战范例 -- 添加单位,自定义计算逻辑
Element UI 【表格合计】el-table 实战范例 -- 添加单位,自定义计算逻辑
542 0
|
8月前
|
Element UI 表格常用改造(表头添加注释、翻页连续序号【内含前端分页】)
Element UI 表格常用改造(表头添加注释、翻页连续序号【内含前端分页】)
274 0
|
8月前
|
vue项目中升级element ui(含常见报错及解决方案,如表格不显示,el-table无效, “__v_isRef“ is not defined,Use :deep() instead)
vue项目中升级element ui(含常见报错及解决方案,如表格不显示,el-table无效, “__v_isRef“ is not defined,Use :deep() instead)
109 0

热门文章

最新文章

  • 1
    Flame:开源AI设计图转代码模型!生成React组件,精准还原UI+动态交互效果
    176
  • 2
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    8
  • 3
    Magma:微软放大招!新型多模态AI能看懂视频+浏览网页+UI交互+控制机器人,数字世界到物理现实无缝衔接
    17
  • 4
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    6
  • 5
    如何在React.js中使用Shadcn/UI
    7
  • 6
    unity判断鼠标在不在UI上
    4
  • 7
    FirstUI:Deepseek能帮我们做很多事情,而这款开源框架专为开发者设计的开源UI框架,让你的项目加速起飞
    18
  • 8
    Vue Amazing UI 组件库(Vue3+TypeScript+Vite 等最新技术栈开发)
    12
  • 9
    【03】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-测试hello word效果-虚拟华为手机真机环境调试-为DevEco Studio编译器安装中文插件-测试写一个滑动块效果-介绍诸如ohos.ui等依赖库-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
    5
  • 10
    WEB CAD插件通过上下文对象MxPluginContext修改UI界面的方法
    6
  • AI助理

    你好,我是AI助理

    可以解答问题、推荐解决方案等