当前位置: 首页 > news >正文

Element-plus中tooltip 提示框修改宽度——解决方案

tooltip 提示框修改宽度方法:

在element中,想要设置表格的内容,超出部分隐藏,鼠标悬浮提示

可以在el-table 上添加show-overflow-tooltip属性

同时可以通过tooltip-options配置提示信息

如下图代码

<el-tableshow-overflow-tooltip:tooltip-options="{ effect: 'dark', placement: 'bottom', showArrow: true, width: '80px' }"height="430":header-cell-style="{ backgroundColor: 'rgba(19, 185, 201,.7)', color: 'rgb(54, 54, 54)' }"></el-table>

在这里插入图片描述

此时,有提示信息,但是,提示框不换行,如果内容很多,则提示框会单行一直显示,所以,我们需要修改提示框的宽度,但是官网并没有提供对应的方法或属性

解决方案:

在全局css样式中书写如下代码:

(如vite创建的项目,在src/style.css中书写)

.el-popper {max-width: 200px !important;
}

如下图:搞定!

在这里插入图片描述

http://www.lryc.cn/news/115504.html

相关文章:

  • java实现当前系统时间格式化
  • 篇十一:享元模式:共享细粒度对象
  • Dev控件 Gridcontrol,gridview 实现多选功能
  • 内网穿透:如何通过公网访问本地Web服务器?
  • 在qemu中挂载镜像文件
  • 报错注入(主键重复)攻击原理
  • Golang基础教程
  • ppt压缩文件怎么压缩最小?文件压缩技巧分享
  • 实例033 制作闪烁的窗体
  • 【JavaEE进阶】Spring创建与使用
  • PHP8的循环控制语句-PHP8知识详解
  • 第八次作业
  • LeetCode //C - 290. Word Pattern
  • [保研/考研机试] 括号匹配问题 C++实现
  • springBoot集成caffeine,自定义缓存配置 CacheManager
  • 【瑞吉外卖】Git部分学习
  • 如何阐述自己做了一个什么样的东西
  • TC3XX - MCAL知识点(二十二):QSPI 同步与异步 Mcal配置及代码实战
  • led台灯哪些牌子性价比高?推荐几款性价比高的护眼台灯
  • 什么情况下容易发生锁表及如何处理
  • elk开启组件监控
  • Java Random 类的使用
  • 完美的分布式监控系统——Prometheus(普罗米修斯)与优雅的开源可视化平台——Grafana(格鲁夫娜)
  • pycharm的Terminal中如何设置打开anaconda3的虚拟环境
  • Jmeter(四) - 从入门到精通 - 创建网络测试计划(详解教程)
  • Flowable-结束事件-空结束事件
  • Elasticsearch:如何创建 Elasticsearch PEM 和/或 P12 证书?
  • 数仓架构模型设计参考
  • RedisTemplate.opsForGeo()用法简介并举例
  • Android OkHttp源码分析--拦截器