react 悬浮现实Tooltip封装

最新推荐文章于 2025-06-10 09:20:59 发布

love-小七

最新推荐文章于 2025-06-10 09:20:59 发布

阅读量745

点赞数

CC 4.0 BY-SA版权

分类专栏： antdUI umi 文章标签： reactjs

本文链接：https://blog.youkuaiyun.com/weixin_48034401/article/details/118558103

antdUI 同时被 2 个专栏收录

7 篇文章

订阅专栏

umi

4 篇文章

订阅专栏

本文介绍了一个前端实现文字超出显示省略号，并通过悬浮提示展示完整内容的方法。通过封装antd的Tooltip组件，只需传入字符串和显示长度即可实现该功能。代码简洁，易于理解，适用于各种需要文字截断的场景。

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

前言：对于前端多余文字超出后现实三个点，悬浮上去后悬浮出来剩余文字，这样子的功能清凉有便捷，深的用户喜爱，

废话不多说，上代码👇

import { Tooltip } from 'antd';



/**
 *
 * 手势悬浮封装
 *
 * */

export const TooltipRender = (str, num) => {
    if (!str) {
        return '-';
    }
    if (str.length > num) {
        return (
            <Tooltip title={str}>
                <span style={{ cursor: 'pointer' }}>{str.slice(0, num)}...</span>
            </Tooltip>
        );
    }
    return <Tooltip>{str}</Tooltip>;
};

这样子做了简单的封装，把antd里面的源码给惊醒了二次封装，咱们只需要在调用的时候，
1.参数一是你要传入的字符串，
2.参数二是你根据字符串第几位现实出，（...）三点

import { TooltipRender } from '@/utils/utils';

// 引入了封装的方法，这样子使用就可以了
TooltipRender(value, 8);

说到最后希望这篇帖子能够帮助到你，代码可以抄但是更得理解，多敲才是王道希望你对代码有着真挚的感情，对自己敲出的代码都有不一样的自信，感谢您的浏览，愿你出走半生，归来仍是少年