antd tooltip在页面滚动后定位失效问题

最新推荐文章于 2025-01-19 18:03:27 发布

蜂巢糖FCT

最新推荐文章于 2025-01-19 18:03:27 发布

阅读量499

点赞数 1

CC 4.0 BY-SA版权

文章标签：数学建模

本文链接：https://blog.youkuaiyun.com/qq_36093530/article/details/131093896

当鼠标移上(.ant-tooltip)元素时，通过JavaScript设置初始隐藏，然后在setTimeout中恢复显示，实现定位的刷新效果。

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

1.鼠标移上mouseover事件中显示时执行刷新定位操作

const tooltip = document.querySelector('.ant-tooltip');
          if (tooltip) {
            tooltip.style.display = 'none';
            setTimeout(() => {
              tooltip.style.display = 'block';
            }, 0);

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

蜂巢糖FCT

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

antd使用tooltip的时候遇到的坑

xiaocuizao的博客

11-28

1万+

在使用表格展示数据的时候，表格每一列的宽度是固定的，当单元格数据过多时，就会需要做溢出隐藏处理，当鼠标滑过（或点击等）的时候，展示该单元格的全部内容 columns = [ { title: '描述', dataIndex: 'desc',key:"desc", onCell: () => { return { style: ...

Jeecg-Boot相对得Antd-Design（个人笔记）

weixin_47295135的博客

02-25

1210

文章目录前言一、Antd-Designantd-DesignGeneralbutton按钮click事件 ——点击按钮时的回调（event）=>void 回调参数LayoutGrid 栅格NavigationAffix 固钉子-（将页面元素钉在可视范围）Breadcrumb面包屑（目录结构）-Dropdown下拉菜单-Checkbox多选题-DatePicker 日期选择框Data EntryForm 表单Input 事件inputNumber数字输入框Radio 单选框Select 选择器.

参与评论您还未登录，请先登录后发表或查看评论

antd tooltip提示错位

qq_49464155的博客

06-06

3546

tooltip错位问题

ant design框架中的tooltip组件包裹自定义组件不生效问题

qq_38517015的博客

07-12

796

应该是为了实现悬浮展示弹框的功能，tooltip需要给子元素注入一些鼠标事件响应函数。tooltip组件包裹自定义组件不生效，悬浮时不展示弹框。子元素需要接收tooltip的事件响应函数。

解决全屏下antd的Tooltip不显示的问题

guanguan0_0的博客

09-24

5297

因为tooltip是定位到父节点的，全屏后或者页面发生变化后，可能会导致tooltip找不到父节点的位置。因此，需要加一个属性来给tooltip绑定它的父节点 getPopupContainer={()=>document.getElementsByClassName("img-opt")[0]} 就这么简单，类似的因为页面位置发生变化而找不到的有联系的组件都可以使用这个来尝试一下。 ...

AntDesign tooltip组件异步显示错位问题

keloneko的博客

02-22

4779

AntDesign tooltip组件异步渲染位置错乱问题解决

GeeFox-sbv3-vben5-admin + ant design vue3使用手册｜开发问题【宇宙最全持续更新】

JaneYork的博客

01-19

1304

GeeFox-sbv3-vben5-admin+antdesignvue3使用手册｜开发问题【宇宙最全持续更新】例如，点击cell查看详情点击cell查看地图安装外部依赖，用了monorepo。

vue3 使用Echarts 的 dataZoom 滑动效果 type: ‘inside‘或type: ‘slider‘时无效果以及悬浮层不显示

agua001的博客

04-19

3982

vue3 使用Echarts 的 dataZoom 滑动效果 type: 'inside'或type: 'slider'时无效果以及悬浮层不显示

vue3 + ant-design3(2.2.6+) + vite

hello，是翠花呀

08-22

791

上次体验了一下vue3+element-plus，总体感觉element-plus比element(vue2)好使且多一些功能。这次体验一下vue3+ant-design2(vue3) 安装好之后按需引入 ant 组件 ant.congig.js: import "ant-design-vue/dist/antd.css"; import { Button, Menu, SubMenu, MenuItemGroup, Row, Col, Radio, RadioGro

Ant Design Pro使用笔记

journeyIT的博客

03-02

2101

一、安装 dva-cli cnpm install dva-cli -g 二、创建应用 dva new dva-project 三、启动应用 cd dva-project npm start 四、安装并使用antd cnpm install antd babel-plugin-import --save 编辑.webpackrc，使babel-plugin-impor...

antd 文字溢出鼠标滑上显示，不溢出，鼠标滑上不显示tooltip

希文Gershwin

01-05

3141

需求与功能该功能实现了文字过长时溢出裁切显示… 鼠标滑上使用 tooltip 显示全部内容文字少时，没有裁切，鼠标滑上不显示 tooltip 在表格中使用效果展示在普通循环list中使用效果展示例子（本例子是基于antd做的，在element-ui，或者是iview中，同样适用） <template> <a-table :columns="columns" :data-source="data"> <a slot="name" slot-s

antd Tooltip 组件设置宽、高不生效及解决方案

最新发布

07-12

<think>我们正在处理用户关于Ant Design Tooltip组件换行显示的问题。根据用户描述，他希望在Tooltip中实现换行显示的效果。在Ant Design中，Tooltip组件的标题（title）属性可以接受字符串或React节点。如果要实现换行，我们可以通过以下方式： 1. 使用HTML的换行标签`<br/>`，并将title设置为一个React元素（例如JSX）。 2. 使用CSS样式，如设置`whiteSpace: 'pre-line'`，这样在字符串中的换行符（如`\n`）就会生效。但是注意，直接使用字符串中的`\n`换行符在Tooltip中默认是不会换行的，因为Tooltip默认的CSS是`white-space: nowrap`。因此，我们需要覆盖Tooltip的样式，或者使用JSX来明确换行。方法一：使用JSX和`<br/>`标签例如： <Tooltip title={<span>第一行<br/>第二行</span>}> <Button>多行提示</Button> </Tooltip> 方法二：使用CSS样式，并利用`\n`换行符我们可以通过设置Tooltip的overlayStyle（或使用className自定义样式）来设置white-space属性为pre-line。例如： <Tooltip title="第一行\n第二行" overlayStyle={{ whiteSpace: 'pre-line' }}> <Button>多行提示</Button> </Tooltip> 注意：在方法二中，字符串中的`\n`需要实际写成换行符，或者在字符串中直接使用`\n`（在JS中字符串中的`\n`会被解析为换行符）。另外，我们也可以使用CSS类名： .custom-tooltip .ant-tooltip-inner { white-space: pre-line; } 然后在Tooltip上添加className="custom-tooltip" 因此，我们可以根据实际情况选择上述方法之一。根据用户提供的引用内容，虽然引用中并没有直接提到换行，但我们可以根据上述方法解决。下面给出一个示例代码：</think>要在 Ant Design 的 Tooltip 组件中实现换行显示效果，可以通过以下两种方法实现： ### 方法一：使用 JSX 元素和 `<br/>` 标签（推荐） ```jsx import { Tooltip, Button } from 'antd'; function App() { return ( <Tooltip title={ <span> 第一行文本内容<br /> 第二行文本内容<br /> 第三行文本内容 </span> } > <Button>悬浮查看多行提示</Button> </Tooltip> ); } ``` ### 方法二：使用 CSS 样式控制换行 ```jsx import { Tooltip, Button } from 'antd'; // 在CSS文件中添加 .custom-tooltip .ant-tooltip-inner { white-space: pre-line; max-width: 300px; /* 可选，控制最大宽度 */ } // 组件中使用 function App() { return ( <Tooltip title="第一行文本内容\n第二行文本内容\n第三行文本内容" overlayClassName="custom-tooltip" > <Button>悬浮查看多行提示</Button> </Tooltip> ); } ``` ### 关键说明： 1. **JSX 方法**更灵活，可以直接在 JSX 中使用 `<br/>` 标签强制换行 2. **CSS 方法**需要： - 设置 `white-space: pre-line` 属性（识别 `\n` 换行符） - 使用 `overlayClassName` 添加自定义样式类 - 文本中使用 `\n` 表示换行位置 3. 两种方法都支持添加自定义样式（字体、背景色等） > 提示：如果内容过长，建议添加 `max-width` 限制宽度避免提示框过宽，同时保持自动换行效果[^1]。