element-ui 修改tooltip样式

news2024/11/25 16:20:06

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);
  }

}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/978915.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

选择企业网盘:MCN机构如何做出明智的选择?

随着在线媒体行业的迅速发展&#xff0c;MCN机构扮演了越来越重要的角色。对于MCN机构来说&#xff0c;高效的文件管理和协作工具是必不可少的。而企业网盘正是满足这些需求的理想解决方案。 "MCN机构用什么企业网盘好&#xff1f;推荐国际云盘Zoho WorkDive和国内云盘百度…

延时消息队列

目录 前言 一、延时队列实用场景 二、DelayQueue DelayQueue的实现 使用延迟队列 DelayQueue实现延时任务的优缺点 三、RocketMQ 原理 四、Kafka 原理 实现 DelayMessage定义 消息发送代码 消费者代码 参考 前言 延时队列的内部是有序的&#xff0c;最重要的…

stm32之31.iic

iic双线制。一根是SCL&#xff0c;作为时钟同步线;一根是SDA&#xff0c;作为数据传输线 SDN #include "iic.h"#define SCL PBout(8)#define SDA_W PBout(9) #define SDA_R PBin(9)void IIC_GPIOInit(void) {GPIO_InitTypeDef GPIO_InitStructure;//使能时钟GR…

开始投简历了

歇了好长时间&#xff0c;也该开始找点事情折腾了。 第一周基本上是没有什么太多的消息&#xff0c;大部分情况就是收到回复的邮件说你很优秀&#xff0c;希望下次合作这种礼节性的拒绝邮件。 给人有点感觉都是在忽悠&#xff0c;有点感觉现在的公司一边到处拒绝&#xff0c;…

短信软件平台搭建最新客户端|移讯云短信系统

根据客户 和市场需要 增加了新的客户端 新的客户端客户登录后发送短信时可自行选择用哪个通道来进行发送短信。每个通道的充值数量不一样。 通过后台给客户分配可使用的通道&#xff0c;只有在后台给客户分配可使用的通道后客户在登录客户端发送短信时才可进行选择。 关于客…

NoSQL之 Redis介绍与配置

目录 一、关系数据库和非关系数据库概述 1、关系型数据库 2、非关系型数据库 二、关系数据库和非关系数据库的区别 1、数据存储格式不同 2、扩展方式不同 3、对事务的支持不同 三、非关系数据库产生背景 1、总结 四、Redis简介 1、 Redis的单线程模式 2、Redis优点…

ChatGPT AIGC 完成多维分析雷达图

我们先让ChatGPT来帮我们总结一下多维分析雷达图的功能与作用。 同样ChatGPT AIGC完成的动态雷达图效果如下; 这样的一个多维分析动态雷达图是用HTML,JS,Echarts 来完成的。 将完整代码复制如下: <!DOCTYPE html> <html style="height: 100%"><h…

服务性能监控:USE 方法(The USE Method)

USE Method: Rosetta Stone of Performance Checklists USE Method: Rosetta Stone of Performance Checklists USE 方法基于 31 模型&#xff08;三种指标类型一种策略&#xff09;&#xff0c;来切入一个复杂的系统。我发现它仅仅发挥了 5% 的力量&#xff0c;就解决了大概…

基于视觉重定位的室内AR导航项目思路(2):改进的建图和定位分离的项目思路

文章目录 一、建图二、定位首先是第一种方法&#xff1a;几何方法其次是第二种方法&#xff1a;图像检索方法最后是第三种方法&#xff1a;深度学习方法 前情提要&#xff1a; 是第一次做项目的小白&#xff0c;文章内的资料介绍如有错误&#xff0c;请多包含&#xff01; 一、…

Unity RawImage

文章目录 1. Image2. RawImage2.1 UV Rect 3. RawImage 应用 1. Image Image 控件在我的这篇博客中有详细解释&#xff1a; https://blog.csdn.net/weixin_45136016/article/details/125655214 2. RawImage RawImage 组件是一个用来显示纹理的组件&#xff0c;常常跟Render …

【OpenCV入门】第九部分——模板匹配

文章结构 模板匹配方法单模板匹配单目标匹配多目标匹配 多模板匹配 模板匹配方法 模板是被查找的图像。模板匹配是指查找模板在原始图像中的哪个位置的过程。 result cv2.matchTemplate(image, templ, method, mask)image&#xff1a; 原始图像templ&#xff1a; 模板图像&a…

基于SSM的医院住院管理系统

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用Vue技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…

第二证券:放量涨停,牛股狂揽七连板,海外机构扎堆调研股出炉

近10个交易日&#xff08;8月23日至9月5日&#xff09;&#xff0c;海外组织对343家上市公司进行调研。 昨日&#xff0c;家居人气股我乐家居再获涨停&#xff0c;成功揽获七连板。其全天成交额近4.98亿元&#xff0c;较上一日大幅放量&#xff0c;最新市值为46.25亿元。 昨日…

Spring+MyBatis使用collection标签的两种使用方法

目录 项目场景&#xff1a; 实战操作&#xff1a; 1.创建菜单表 2.创建实体 3.创建Mapper 4.创建xml 属性描述&#xff1a; 效率比较&#xff1a; 项目场景&#xff1a; 本文说明了Spring BootMyBatis使用collection标签的两种使用方法 1. 方法一: 关联查询 2. 方法…

fontforge将.woff文件转换为.ttf文件,查看字体对应关系

一、fontforge下载 阿里云盘&#xff1a;https://www.aliyundrive.com/s/tHBoGpYSgWh 提取码: 6c5m 百度网盘&#xff1a;https://pan.baidu.com/s/1ccWkGgarq3Vh_QJ8mNbn8g 提取码&#xff1a;ulr5 二、.woff文件转换为.ttf文件 1、用fontforge打开.woff文件&#xff0c…

ElasticSearch的安装部署-----图文介绍

文章目录 背景什么是ElasticSearch使用场景 ElasticSearch的在linux环境下的安装部署前期准备分配权限启动ElasticSearch创建用户组创建用户&#xff0c;并设置密码用户添加到elasticsearch用户组指定用户操作目录的一个操作权限切换用户 解压elasticsearch修改es的配置文件修改…

Mybatis-Pagehelper参数supportMethodsArguments引起的血案

0x00 背景 一个历史悠久的项目&#xff0c;使用的技术栈主要是 spring cloud 体系&#xff0c;属于 service 范畴&#xff0c;不给外部提供接口&#xff0c;但是集成了 myabtis-pagehelper&#xff0c;具体的版本如下&#xff1a; <dependency><groupId>com.gith…

【100天精通Python】Day55:Python 数据分析_Pandas数据选取和常用操作

目录 Pandas数据选择和操作 1 选择列和行 2 过滤数据 3 添加、删除和修改数据 4 数据排序 Pandas数据选择和操作 Pandas是一个Python库&#xff0c;用于数据分析和操作&#xff0c;提供了丰富的功能来选择、过滤、添加、删除和修改数据。 1 选择列和行 Pandas 提供了多种…

VS2022+CMAKE+OPENCV+QT+PCL安装及环境搭建

VS2022安装&#xff1a; Visual Studio 2022安装教程&#xff08;千字图文详解&#xff09;&#xff0c;手把手带你安装运行VS2022以及背景图设置_vs安装教程_我不是大叔丶的博客-CSDN博客 CMAKE配置&#xff1a; win11下配置vscodecmake_心儿痒痒的博客-CSDN博客 OPENCV配…

网络安全行业岗位缺口有多大?看看美国有多少岗位空缺

网络安全行业岗位缺口一直很大&#xff0c;在各类统计中其实并不能完全客观的反应这个缺口&#xff0c;不过都可以作为一个参考。同时&#xff0c;网络安全行业岗位的人员能力参差不齐&#xff0c;不仅仅在数量上有所欠缺&#xff0c;同时从质量上更加加剧了对人才的需求。我们…