react icon ant简单使用

refer: 文字提示 Tooltip - Ant Design

1.首先保证已经引入了Ant

2.在组件(页面)引入tooltip

import { Form, Tooltip } from 'antd';

3.在合适的位置使用tooltip:

 <span>
   寿命&nbsp;
   <Tooltip title="这是寿命的说明">
     <QuestionCircleOutlined />
   </Tooltip>
 </span>

解释:

QuestionCircleOutlined是一个中心是问号的圆圈,hover后就可以显示你想要展示在说明里的文字。

相关推荐
无限大.3 小时前
前端知识速记:节流与防抖
前端
十八朵郁金香3 小时前
【VUE案例练习】前端vue2+element-ui,后端nodo+express实现‘‘文件上传/删除‘‘功能
前端·javascript·vue.js
学问小小谢3 小时前
第26节课:内容安全策略(CSP)—构建安全网页的防御盾
运维·服务器·前端·网络·学习·安全
LCG元3 小时前
Vue.js组件开发-实现全屏图片文字缩放切换特效
前端·javascript·vue.js
还是鼠鼠4 小时前
图书管理系统 Axios 源码__新增图书
前端·javascript·vscode·ajax·前端框架·node.js·bootstrap
还是鼠鼠7 小时前
图书管理系统 Axios 源码 __删除图书功能
前端·javascript·vscode·ajax·前端框架·node.js·bootstrap
轻口味7 小时前
Vue.js `Suspense` 和异步组件加载
前端·javascript·vue.js
m0_zj9 小时前
8.[前端开发-CSS]Day08-图形-字体-字体图标-元素定位
前端·css
还是鼠鼠9 小时前
图书管理系统 Axios 源码__编辑图书
前端·javascript·vscode·ajax·前端框架
北极象9 小时前
vue3中el-input无法获得焦点的问题
前端·javascript·vue.js