antd tooltip提示错位

最新推荐文章于 2025-04-03 09:30:04 发布

璐瑶知码li

最新推荐文章于 2025-04-03 09:30:04 发布

阅读量3.4k

点赞数 7

文章标签： javascript vue.js

本文链接：https://blog.csdn.net/qq_49464155/article/details/125143855

版权

本文档探讨了在项目中使用Ant Design（Antd）的List、Card、Image和Tooltip组件时遇到的问题。当item.name内容过长，Tooltip显示位置不正确，导致错位。通过检查元素发现内部span标签宽度未限制。解决方案是将内部span元素的宽度设置为100%，确保其与外部元素宽度一致，从而修正Tooltip的位置。

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

项目中使用了antd中的List、Card、Image、Tooltip结合使用

代码如下：

<List
  loading={listLoading}
  grid={{ gutter: 16, xxl: 5, xl: 4, xs: 4, sm: 4, md: 4, lg: 4 }}
  dataSource={list}
  renderItem={item => (
    <List.Item>
      <Card
        hoverable
        cover={<Image
          src={item.link}
          fallback={noImage}
          preview={false}
        />}
        onClick={() => clickCard(item.Id)}
        bodyStyle={{ padding: '20px' }}
      >
        <Meta description={<Tooltip title={item.name}> {item.name}</Tooltip>} />
      </Card>
    </List.Item>
  )}
/>

如下：如果item.name过长，鼠标悬浮在第一个文字时，tooltip出现在如下位置，跟我们理想情况不一样

打开控制台检查元素，发现span标签过长，只是视觉上看不到隐藏的内容，tooltip默认显示在内部元素的中上方，所以才会出现上图的错位情况

解决办法：我们要把内部元素宽度设置成跟外部元素一样的宽就行了，如果遇到tooltip位置不对的情况，不防检查下内部元素

.ant-card-meta-description {
  span {
    display: inline-block; // 行内元素设置width无用，需要先转换成行内块/块元素
    width: 100%;
  }
}