解决el-tooltip点击后出现黑框和悬浮内容不消失问题

最新推荐文章于 2025-05-27 16:15:59 发布
原创 最新推荐文章于 2025-05-27 16:15:59 发布 · 2.6k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#bug #前端 #javascript

本文介绍了解决在项目中使用图标字体时遇到的问题：当鼠标悬浮于图标上时出现的黑框以及悬浮内容无法消失的情况。通过简单的代码调整即可实现美观的视觉效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

如图所示：项目需求要在表格操作iconfont字体图标悬浮上去显示按钮的意思，但是点击确认后会出现这样的小黑框，而且悬浮字体不会消失，很难看，

解决办法： 

只需要加上这个就可以了，第一个是去掉丑陋的黑框，下面的是让悬浮的内容不显示 

el-tooltip的二次封装，文字过长省略，hover时悬浮，不省略不悬浮
qq_45840993的博客
10-21 985
el-tooltip是我们的常用组件，但是无法判断绑定元素是否过长需要省略的，此组件对el-tooltip的二次封装，文字过长省略，hover时悬浮，未超出长度限制时不显示，代码如下。
vue3+elemeent-plus, el-tooltip的样式修改不生效
listener_life的博客
07-06 4204
vue3 + element-plus，el-tooltip的样式修改不生效，修改tooltip的背景颜色
el-tooltip 显示黑色边框问题解决
weixin_44054563的博客
08-14 1037
项目中需要一套icon，但是这套icon需要用到element ui的tooltip样式展示出这个icon的含义。但是嵌入到项目中有一系列的问题，比如点击icon之后总是出现这种黑色框。于是我上网一顿查，发现很多人都遇到过这种问题。然后我努力的看浏览器解析出来的样式，终于发现了其问题所在~
Element ui 使用抽屉组件 el-drawer和el-tooltip 出现黑框的样式问题
FTEzreal的博客
03-26 1485
解决 给el-tooltip加css样式 .el-tooltip{ outline: none !important; }
解决 el-tooltip 滚动时错位不消失
最新发布
weixin_41706307的博客
05-27 254
弹窗控件中，遇到滚动错位。
前端element的el-tooltip鼠标经过显示文字，没有文字显示空黑框问题
migexiaoliang的博客
11-15 1699
便可，在不展示提示文字的时候。
el-popover/el-tooltip 点击里面的文本时 文本会有一个框，怎么取消掉呢
qq_36940740的博客
07-23 3294
那这个框怎么去掉呢？ 给你的显示的哪个标签盒子加个属性，就ok啦！
el-tooltip点击后才显示内容
m0_68937827的博客
05-17 910
【代码】el-tooltip点击后才显示内容。
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
12-29
ElementUI2.0的表格的扩展： elementUI表格table elementUI文字提示Tooltip 如果要实现鼠标移到表头有注释或者弹框该怎么添加呢？... tooltip-effect=dark > <template v-for=(item,index)> <el-table-c
element-ui tooltip修改背景颜色和箭头颜色的实现
10-15
在示例中，我们看到 `el-tooltip__popper[x-placement^=left] .popper__arrow::after` 和 `.el-tooltip__popper[x-placement^=left] .popper__arrow` 都被用来设置箭头的颜色。这是因为 Element UI 会根据 Tooltip ...
el-tooltip
qq_42560402的博客
09-30 1321
1、在使用el-tooltip时，点击里面的内容时，内容上会有一个框。 解决办法：在内容的样式上加个’outline: 0px;’
vue+el-table-column的show-overflow-tooltip属性 单元格内容空悬浮会触发黑色悬浮框的问题
MengRui2333的博客
01-09 4206
show-overflow-tooltip为true时，表示如果内容过长超出宽度就会在上方显示黑色悬浮框+内容。但是现在在windows电脑上内容为空和没有超出宽度时都会一直触发这个属性，macbook无此问题。 解决办法：不使用这个属性，使用el-tooltip。 <el-table-column align="c...
怎么把element的tootip设置为点击后出现提示框，且在提示框里面放其他元素，vue2动态给对象添加属性并实现响应式应答，样式穿透，获取年月日
chuxialia的博客
12-23 3231
怎么把element的tootip设置为点击后出现提示框，且在提示框里面放其他元素，vue2动态给对象添加属性并实现响应式应答，样式穿透,获取年月日
el-tooltip设置为鼠标点击展示
m0_46129241的博客
09-28 7545
HTML: <el-tooltip :manual="true" v-model="testDisabled" class="item" effect="dark" placement="bottom"> <p slot="content">设置为鼠标点击展示</p> <el-button id="testDisabled" href="javascript:void(0
vue el-tooltip 提示黑框遮挡问题
weixin_41807530的博客
11-27 4678
在用于文字过长提示的时候，如果输入框为空。就会出现黑框遮挡问题。 解决方法：   例： &lt;el-table-column prop='Remark' :label='trInvoiceBatch.Remark.Name' show-overflow-tooltip v-if="!readOnly"&gt; &lt;template scope='scope'...
【ElementPlus使用记录】el-tooltip使用记录
cpsxn的博客
06-04 5136
el-tooltip动态展示内容，文本添加颜色
echarts tooltip绑定点击事件并弹出弹框
hsany330的专栏
10-22 5617
1.问题描述 实现如图效果，当鼠标悬浮/点击小脚位置时，弹出tooltip框，并且鼠标点击查看更多按钮弹出弹框。 2. 实现步骤 2.1 问题汇总 样式不生效（提示框设置样式必须为全局样式） 按钮点击无响应（按钮样式增加 pointer-events: auto） 按钮点击方法不执行（需增加全局作用域的样式， tooltip无法使用vue组件的方法， 必须定义windows全局上） tooltip字段主要配置如下 tooltip: { // 鼠标是否可以进入悬...
el-tooltip中 content点击事件 弹窗闪烁引发的思考
像梦巧清的博客
12-02 1831
element-plus中对于el-tooltip的使用
Tooltip 文字提示 点击小图标显示文字
m0_65274248的博客
09-20 520
Tooltip 文字提示 点击小图标显示文字
vue+el-table-column的show-overflow-tooltip属性 内容为空 出现悬浮窗问题
05-14
当使用 `show-overflow-tooltip` 属性时，如果内容为空，则会出现悬浮窗问题。这是因为该属性会将单元格内容隐藏，只显示省略号，并在悬浮时显示完整内容。因此，如果内容为空，则悬浮窗会出现在单元格的左上角，不...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值