antd tooltip提示错位

项目中使用了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%;
  }
}