使用v-if控制el-tooltip显隐时，el-tooltip不显示问题

已于 2022-07-07 15:32:10 修改
阅读量1.1k 收藏 1
点赞数
文章标签： vue elementui
于 2022-07-04 10:13:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45749016/article/details/125594345
版权

使用v-if控制el-tooltip显隐时，el-tooltip不显示问题

在使用el-tooltip时，外层增加了v-if条件判断，导致无论如果切换后的内容都不显示，再次切换回来也不显示在这里插入图片描述
在这里插入图片描述在这里插入图片描述

因为vue没有hover效果，所以用@mouseenter，@mouseleave模拟hover效果，modal受到pop中v-model的控制，每次pop开关引起它变化，它又控制了里面内容的卸载与挂载。有时pop弹出的位置可能在左上角，所以在外层用个盒子包裹下

weixin_45749016
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
v-title:辅助文字显示（如“ el-tooltip”）
05-12
标题 辅助文本显示（如el-tooltip ）。 用法 安装 npm install --save v-title 需要element-ui 如果您的项目不使用element-ui，则需要引入一个单独的element-ui包，如下所示： import 'v-title/lib/element-ui' ; 全球注册 import Vue from 'vue' ; import VTitle from 'v-title' ; Vue . use ( VTitle ) ; 组件内注册 import VTitle from 'v-title' ; export default { directives : { VTitle } } ; 选项 修改 延迟：显示延迟 灯光：使用灯光效果，默认设置：标准 溢出：使用溢出模式 多重：使用多行模式（需要设置元素的line-height >
element el-tooltip 不显示
XXXTENTACIONXXXX的博客
05-16 713
这个问题通常是因为我需要显示的内容有v-if之类的判断所以在外层包一个盒子加上一样的判断就可以了。也有人说在el-tooltip 写同样的判断不过我试了一下不好用 所以就不写上去了。
解决el-tooltip不显示
最新发布
KyLen_Mou的博客
02-23 657
el-tooltip内需要标签来嵌套内容。把内容嵌套一个标签即可。
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
10-17
主要介绍了VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
v-tooltip:Vue 3的工具提示
03-20
v工具提示 Vue 3工具提示自定义指令 目录 安装 将tooltip.js粘贴到您的src文件夹中，为了清楚起见，我亲自在其中创建了文件夹directives 。下一步是将tooltip.css粘贴到assets文件夹中。 拥有所有文件后，打开main.js文件（或任何挂载应用程序的文件），然后导入这些文件。然后使用app.directive全局添加v-tooltip自定义指令。它看起来应该类似于： import { createApp } from "vue" ; import App from "./App.vue" ; import tooltip from "./directives/tooltip.js" ; import "@/assets/tooltip.css" ; const app = createApp ( App ) ; // app.directive's
使用vue-seamless-scroll滚动表格数据，el-tooltip失效，一部分内容无法显示弹窗
m0_53397360的博客
06-21 1119
表格数据需要滚动展示，表格内容由于过长使用省略号进行展示，鼠标移上去显示文本内容。滚动展示使用vue-seamless-scroll组件，由于vue-seamless-scroll通过直接复制div，通过两个div的交替移动使得表格数据滚动展示，因此原本的div鼠标移上去能够显示el-tooltip，复制的div鼠标移上去没有反应。1、去除el-tooltip组件，使用事件代理的方式，显示文本内容弹窗。
el-tooltip无法显示的问题
weixin_43882265的博客
07-26 5668
组件一定要加，否则表格中无法显示该列的值；这样写，无论是否刷新页面都会显示tooltip，问题解决。标签的里面，给显示值{{tableScope.row.name}}外面加一个。因为该表格中该列的实例名是超链接，且该超链接组件是我们自己封装的，代码如下。组件加了一个key属性，该属性的值toRender是变化的，Js中每。需要在表格中的实例名上添加鼠标悬停显示tooltip的效果；但是只要页面手动刷新，该tooltip就无法显示了。一次，该toRender值就+1，保证每次。...
element-ui tooltip失效
m0_50841104的博客
05-19 348
element-ui tooltip失效 问题: element-ui tooltip 表格换页失效 原因:v-if加在了i标签上,dom未渲染,移入移出事件失效 解决:v-if要加在el-tool标签上就可以了 <el-tooltip class="item" effect="dark" placement="bottom" v-if="
elementUI中使用tooltip遇到的坑
fangqi20170515的博客
04-25 3274
按理来说disabled属性写在el-tooltip上会影响其可用性，但是万万没想到写在button上的disabled属性也会造成影响…在el-button外边嵌套了一个div，这样子操作能避免了el-button的disabled属性对el-tooltip显示的影响。
vue element Tooltip 文字提示
weixin_65456815的博客
06-28 471
页面保护用户隐私，避免拍照把信息全部暴露出来，在表格里加了一个饿了么的文字提示，默认展示悬浮可见文字，鼠标放上显示对应的数据。
el-tooltip不显示问题
qq_41838435的博客
07-07 6979
el-tooltip不显示问题 在使用el-tooltip时，使用方法什么都一样，有些就是显示不出来，最后才发现，其包裹元素添加了v-if条件，那么el-tooltip也应该加上相同的条件，要不然就会显示不出来 <el-tooltip v-if="radioList === 'isAbandoned'" class="item" effect="dark" content="撤销标记" placement="top" > <sp
v-tooltip-使用Vue 2.x的简单工具提示。-Vue.js开发
05-27
v-tooltip使用Popper.js的便捷工具提示，弹出窗口和下拉菜单赞助商实时演示JSFiddle目录入门安装v-tooltip使用Popper.js的便捷工具提示，弹出窗口和下拉菜单赞助商有用的链接Live Demo JSFiddle目录入门指南用法指令...
react-native-walkthrough-tooltip：用于通过工具提示调出React Native组件的内联包装器
02-05
当不可见时，已包装的元素将正常显示。 由 ：使用react-native-walkthrough-tooltip的React Native轻量级过渡库 目录 安装 yarn add react-native-walkthrough-tooltip 1.0版中的重大更改 对于1.0版，该库进行了...
vue2多条件筛选，配合el-tooltip实现二级分类
weixin_45701630的博客
11-07 2588
vue2完成多条件筛选功能，配合elementui中的el-tooltip，实现一级或二级分类筛选功能，同时增加头部分类显示，可删除或清空。超过一行高度的分类项进行隐藏，通过按钮实现展开和收起功能，效果如图所示。
element 中 el-table 中循环渲染时v-for和v-if 不能写在同一个标签上
qq_39250610的博客
06-23 85
element 中 el-table 中循环渲染时v-for和v-if 不能写在同一个标签上 如： 1.报错写法 {{item.objective_title}} 2.正确写法 {{item.objective_title}}
Element——tooltip无效和自定义内容
六耳石猴的博客
12-14 3662
tooltip无效 使用中发现，当tooltip内部元素内容为空，导致dom元素的wdth或height为0时，无法捕捉到鼠标悬浮动作，所以会失效 使用注意 tooltip中需要有html元素 如果希望始终有tooltip内容，要给内部html元素设置默认宽高，使其可以被鼠标hover动作捕捉 自定义内容使用v-html和函数协作 <el-tooltip effect="dark" placement="right" > <div slot="content" v-h
【vue+element-ui】v-for与v-if不能同时使用的解决方案之一
Y_hhya的博客
12-28 622
使用vue-cli脚手架搭建的项目，v-for与v-if不能同时使用，会报错 <el-submenu index="1" v-for="(item, index) in this.$router.options.routes" :key="index" v-if="!item.hidden" > <template slot="title"><i class="el-icon-message"></i
vue element-ui el-tooltip组件失效问题
ygrhlh的博客
12-01 9288
vue element-ui tooltip组件不显示
tooltip不生效问题
Zhang_zhangxka的博客
02-20 2183
这里特别需要注意一下哦～～ el-tooltip 的样式加上了scope是不生效的，但是页面中不加的scope可能会出现样式污染的情况～那么这样的话咱们就可以用两个style标签啦～最近在写一些表格页面，还有一些提示，我就用了 标签，大概我项目的代码如下。
show-overflow-tooltip不显示tooltip
01-18
show-overflow-tooltip属性用于在Element-UI的el-table表格中设置是否显示tooltip文本提示内容。根据提供的引用内容，show-overflow-tooltip属性不显示tooltip的原因可能有以下几种情况： 1. 属性替换问题：可能是show-overflow-tooltip属性的写法不正确。尝试将`:show-overflow-tooltip="true"`替换为`show-overflow-tooltip`。 2. 嵌套问题：show-overflow-tooltip属性需要在el-table-column标签内部嵌套使用才能生效。确保show-overflow-tooltip属性位于el-table-column标签内，并且在标签内部嵌套了其他标签。 以下是一个示例代码，展示如何正确使用show-overflow-tooltip属性： ```html <el-table> <el-table-column prop="cooperateStatus" label="状态" min-width="110" align="center"> <template slot-scope="scope"> <span v-if="scope.row.status == 0" show-overflow-tooltip>启用</span> </template> </el-table-column> </el-table> ``` 请注意，示例代码中的show-overflow-tooltip属性位于span标签上，并且span标签是在el-table-column标签内部嵌套的。

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值