Vue ElementUI el-tooltip 全局样式修改

AvatarGiser

已于 2023-11-01 14:03:08 修改

阅读量614

点赞数

分类专栏：《ElementUI 基础知识》文章标签： vue.js elementui 前端

于 2023-11-01 14:01:38 首次发布

本文链接：https://blog.csdn.net/sinat_31213021/article/details/134159564

版权

《ElementUI 基础知识》专栏收录该内容

35 篇文章 7 订阅

订阅专栏

el-tooltip

要点

此处是全局配置；
如果想设置指定的 tooltip 可设置属性 popper-class，为 tooltip 的 popper 添加类名；
代码 6 - 8 行，隐藏小三角；

.el-tooltip__popper {
    border-radius: 4px !important;
    color: #9E9D24 !important;
    background: #F9FBE7 !important;
    border: 1px solid #9E9D24 !important;
    .popper__arrow {
        display: none !important;// 隐藏小三角
    }
}

修改前

在这里插入图片描述

修改后
在这里插入图片描述

优惠劵

AvatarGiser

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue ElementUI el-tooltip 全局样式修改

Vue ElementUI el-tooltip 全局样式修改。
复制链接

扫一扫

专栏目录

vue elementui el-form rules动态验证的实例代码详解

10-16

在使用elementUI el-form 中，对于业务不同的时候可能会产生不同表单结构，但是都是存在同一个表单控件el-form中。这篇文章主要介绍了vue elementui el-form rules动态验证的实例代码,需要的朋友可以参考下

Element--el-tooltip定义样式

最新发布

ccqq441的博客

03-22

730

myTooltip是自定义的加上这个属性值后 tooltip会加一个myTooltip的样式名（如果只有tooltip-effect="myTooltip" 样式名是is-myTooltips）注意没有scoped 全局tooltip样式都会受影响如果加了scoped 则修改失效，因为.el-tooltip__popper不是当前组件层级的。el-table添加属性：tooltip-effect="dark myTooltip"属性本身具有的可选值加上这个属性值之后 tooltip会有一个。

【element ui】 el-tooltip 样式修改

l2257890的博客

07-20

9161

今天是2021年的第201天，更一篇吧。否则2021年的博客就真的寸草不生了。文章目录前言一、pandas是什么？二、使用步骤 1.引入库 2.读入数据总结前言最近使用到el-tooltip组件和el-popper组件，但是自定义背景色时痛苦难受。毕竟与el-select还是有些不同。因此，特来记录。一、el-tooltip组件该组件常用于展示鼠标 hover 时的提示信息。基本使用方式见element ui官网。二、自定义样式 .

Element UI Table 设置全局showOverflowTooltip

咻咻ing的专栏

11-17

2530

Table 作为前端开发中最常用的一个控件，在使用Table展示数据时，可能会因为某列的内容过长，导致表格换行比较难看。使用Element UI的同学可以使用showOverflowTooltip属性，默认值为false，设置为true后，在某列内容展示不下时，自动添加…缩略，鼠标移动到这列时，展示tooltip来展示完整内容。但是，如果每个使用到Table的地方都设置，那要设置的地方就多了。可以使用全局修改showOverflowTooltip的默认值为true，就不需要在列表的地方设置了。在m

el-tooltip 如何修改样式

coderhhan的博客

10-22

1万+

el-tooltip 如何修改样式 el-tooltip标签又popper-class="atooltip"属性可以给组件建一个选择器名。通过atooltip可以直接修改el-tooltip. <el-tooltip placement="bottom" popper-class="atooltip"> <div slot="content"> ceshi </div> <el-button>Dark</el-bu

element-ui 修改tooltip样式

qq_34169240的博客

09-06

2854

2.表格加tooltip-effect。1.表格tooltip 统一修改。

elementUI中的el-tooltip样式设置

weixin_55782474的博客

02-11

3285

el-tooltip的样式不能放在scoped中，原因：动态添加组件的层级是和app是在同一层级的正确写法： <el-tooltip class="item" effect="light" placement="right-start" popper-class="atooltip"> <div>123</div> </el-tooltip> <style lang="scss"> .atooltip { background

element el-tooltip样式修改和使用

weixin_41843107的博客

08-14

2140

【代码】element el-tooltip样式修改和使用。

el-popover和el-tooltip样式修改(普通的组件样式修改方法，对popover是不生效的)

m0_38109616的博客

11-20

2673

el-popover和el-tooltip样式修改(普通的组件样式修改方法，对popover是不生效的)

VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip

12-29

elementUI文字提示Tooltip 如果要实现鼠标移到表头有注释或者弹框该怎么添加呢？ <el empty-text=正在加载中... data=contentList xss=removed sort-change=sort class=pro-table-item tooltip-effect=dark > ...

Vue ElementUI el-select 图片选择效果

02-24

基于 Vue2.x，对 ElementUI el-select 做图片选择效果。项目说明可参见：https://blog.csdn.net/sinat_31213021/article/details/129195721

vue-el-calendar.zip Vue -ElementUI 日历控件

06-21

vue-el-calendar.zip Vue -ElementUI 日历控件以vue为承载容器，使用elementUI为组件，css3搭配色彩，样式较为美观，满足基本需求，无第三方依赖环境，体积几百K 在vue+elementUI的项目中，丢入即可运行出来

vue修改Element的el-table样式的4种方法

10-14

主要介绍了vue修改Element的el-table样式的4种方法，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下

element 修改 tooltip、表格中tooltip

qq_63234972的博客

12-13

element 修改 tooltip、表格中tooltip

在Vue项目中设置样式不效果(作用)时,很可能引入全局统一样式,想要单独设置样式,使用深度选择器

m0_49714202的博客

02-10

1249

原因: 全局引入同一个样式的时候,比如表格表头,单独设置样式不起作用, 个人觉得应该是引入全局样式覆盖单独设置样式,这时候必须用深度选择器后台管理,商城等等偶需要引入全局样式便捷这是需要用到深度选择器深度选择器语法: (1) .XXX /deep/ .XXX (2) .XXX >>> .XXX elementUI表格案例: 注意:如果设置class不起作用就F12控制查看位置,对应class名称下面案例就需要F12查看对应class尤其elementUI的class不好找名称 //

如何修改el-tooltip样式及审查元素时让它一直出现

qq_42931285的博客

07-13

3816

自定义el-tooltip样式

修改el-tooltip的样式

weixin_63896561的博客

07-26

1171

需要注意的就是，该代码片段，需要写在根文件的style里，如果写在当前文件里也并非不可，但是需要将scope取消掉，原因是因为：该组件的层级不在于你使用的地方，它与跟文件属于统一层级。

vue 设置el-tooltip 关闭按钮样式

06-03

你可以通过以下方式修改 `el-tooltip` 组件关闭按钮的样式： 1. 在 `style` 标签中添加以下代码： ```css .el-tooltip__popper .popper__arrow::before, .el-tooltip__popper .el-tooltip__closebtn::before { color: #000; /* 修改关闭按钮的颜色 */ } .el-tooltip__popper .popper__arrow::before { border-color: #000 transparent transparent transparent; /* 修改关闭按钮的箭头颜色 */ } .el-tooltip__popper .el-tooltip__closebtn:hover::before { color: #fff; /* 修改关闭按钮的鼠标悬停时的颜色 */ } ``` 2. 将 `el-tooltip` 组件的 `popper-class` 属性设置为一个自定义的类名，如： ```html <el-tooltip content="这是提示内容" popper-class="my-tooltip"> <span>鼠标移上来看看</span> </el-tooltip> ``` 3. 在 `style` 标签中添加以下代码： ```css .my-tooltip .el-tooltip__popper .popper__arrow::before, .my-tooltip .el-tooltip__popper .el-tooltip__closebtn::before { color: #000; /* 修改关闭按钮的颜色 */ } .my-tooltip .el-tooltip__popper .popper__arrow::before { border-color: #000 transparent transparent transparent; /* 修改关闭按钮的箭头颜色 */ } .my-tooltip .el-tooltip__popper .el-tooltip__closebtn:hover::before { color: #fff; /* 修改关闭按钮的鼠标悬停时的颜色 */ } ``` 以上就是修改 `el-tooltip` 组件关闭按钮样式的方法。

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

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交