ant-design中form组件的item在typescript环境下自定义提示文字（Form.Item的tooltip属性）及提示图标

一. 实现效果

代码环境：react、typescript、ant-design-react

ant-design-react中用到的组件为Form

想要实现的效果如下图：

上图中：

① 每个label文字内容后面的问号为自定义的图标

② 鼠标hover问号图标后，显示的提示内容大小及文字样式自己定义，且每个提示框的宽高可以不同

二.实现代码

import { Form, Select } from 'antd'

return (
 <Form layout='vertical'>
   <Form.Item
     label='Task target'
     tooltip={
       overlay: `* TIPS：1. Studying a subject that you feel pointless is never a fun or easy task. If you're study history, asking yourself the question "why is history important" is a very good first step；2. You will find something here that will arouse your interest, or get you thinking about the significance of history.`,
       placement: 'rightTop',
       color: '#F2EEFF',
       overlayInnerStyle: {
         width: '424px',
         color: '#F5A95D',
         padding: '16px 20px',
         fontSize: '14px',
         lineHeight: '20px',
         fontWeight: 500,
         fontFamily: 'PingFang SC-中黑体, PingFang SC',
       },
       icon: (
         <img
           src={'https://xxxxx.png'} // 自定义图标地址
           alt='coverImage'
           style={{ marginLeft: '12px', width: '16px', height: '16px' }}
         />
       ),
     }
    >
    <Input
      bordered={false}
      className={'common-style'}
      showCount
      maxLength={64}
      placeholder='Place an order at my value store, no refunded'
     />
   </Form.Item>
   ......
 <Form />  
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

实现效果图如下：

* 2.1 但是现在有新的问题了。Form里面有很多个item，每个item都需要这样的提示，这样的话HTML写的代码就太多了，并且有很多重复的代码。

下面修改下，将代码进行复用

import React from 'react'
import { Form, Select } from 'antd'
import type { TooltipProps } from 'antd'
type LabelTooltipType = React.ReactNode | (TooltipProps & { icon?: React.ReactElement })

const getTooltipValue = (overlay: string, width: string): LabelTooltipType => {
  return {
    overlay: overlay,
    placement: 'rightTop',
    color: '#F2EEFF',
    overlayInnerStyle: {
    width: width,
    color: '#F5A95D',
    padding: '16px 20px',
    fontSize: '14px',
    lineHeight: '20px',
    fontWeight: 500,
    fontFamily: 'PingFang SC-中黑体, PingFang SC',
  },
  visible: true, // 一直显示提示弹框，方便调试
  icon: (
    <img
       src={'https://xxxxx.png'} // 自定义图标地址
       alt='coverImage'
       style={{ marginLeft: '12px', width: '16px', height: '16px' }}
     />
   ),
 }
}

return (
 <Form layout='vertical'>
   <Form.Item
     label='Task target'
     tooltip={getTooltipValue(
       `* TIPS：1. Studying a subject that you feel pointless is never a fun or easy task. If you're study history, asking yourself the question "why is history important" is a very good first step；2. You will find something here that will arouse your interest, or get you thinking about the significance of history.`,
       '424px'
     }
    >
    <Input
      bordered={false}
      className={'common-style'}
      showCount
      maxLength={64}
      placeholder='Place an order at my value store, no refunded'
     />
   </Form.Item>
   ......
 <Form />  
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

我的需求里面，提示的内容只有宽度和内容不同，所以我只将width和overlay作为了参数传值；如果你的项目有其他的内容不同，也改为参数传值即可。

2.2 此时又遇到了一个新的问题，如下图：

第一点的内容应该换行展示，第二点的内容也应该换行展示，现在全部展示到一起了。

解决如下：

① 第一种方法：使用

tooltip={getTooltipValue(
  `* TIPS：
1. Studying a subject that you feel pointless is never a fun or easy task. If you're study history, asking yourself the question "why is history important" is a very good first step；
2. You will find something here that will arouse your interest, or get you thinking about the significance of history.`,
   '424px'
}
1
2
3
4

效果如下：

没有起到作用，该方法用在placeholder属性上却有效果，代码如下：

<Form layout='vertical'>
  <Form.Item label='Task description'>
     <TextArea
        bordered={false}
        showCount
        maxLength={160}
        className={'common-style'}
        placeholder="* TIPS：
1. Studying a subject that you feel pointless is never a fun or easy task. If you're study history, asking yourself the question why is history important is a very good first step；
2. You will find something here that will arouse your interest, or get you thinking about the significance of history."
      />
   </Form.Item>
</Form>
1
2
3
4
5
6
7
8
9
10
11

效果如下：

在placeholder中使用 可以实现换行。

② 第二种方法：在文本所在标签设置white-space: 'pre-line’属性样式后，再在文字内容中使用\n

完整代码如下：

import React from 'react'
import { Form, Select } from 'antd'
import type { TooltipProps } from 'antd'
type LabelTooltipType = React.ReactNode | (TooltipProps & { icon?: React.ReactElement })

// getTooltipValue方法里面设置 whiteSpace: 'pre-line'
// tooltip属性调用getTooltipValue方法时，传入的文本加\n
const getTooltipValue = (overlay: string, width: string): LabelTooltipType => {
  return {
    overlay: overlay,
    placement: 'rightTop',
    color: '#F2EEFF',
    overlayInnerStyle: {
    width: width,
    color: '#F5A95D',
    padding: '16px 20px',
    fontSize: '14px',
    lineHeight: '20px',
    fontWeight: 500,
    fontFamily: 'PingFang SC-中黑体, PingFang SC',
    whiteSpace: 'pre-line',
  },
  visible: true, // 一直显示提示弹框，方便调试
  icon: (
    <img
       src={'https://xxxxx.png'} // 自定义图标地址
       alt='coverImage'
       style={{ marginLeft: '12px', width: '16px', height: '16px' }}
     />
   ),
 }
}

return (
 <Form layout='vertical'>
   <Form.Item
     label='Task target'
     tooltip={getTooltipValue(
       `* TIPS：\n1. Studying a subject that you feel pointless is never a fun or easy task. If you're study history, asking yourself the question "why is history important" is a very good first step；\n2. You will find something here that will arouse your interest, or get you thinking about the significance of history.`,
       '424px'
     }
    >
    <Input
      bordered={false}
      className={'common-style'}
      showCount
      maxLength={64}
      placeholder='Place an order at my value store, no refunded'
     />
   </Form.Item>
   ......
 <Form />  
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

效果如下：

得到了想要的效果，对应部分都进行了换行展示。

（完）