一. 实现效果
代码环境: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 />
)
实现效果图如下:
* 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 />
)
我的需求里面,提示的内容只有宽度和内容不同,所以我只将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'
}
效果如下:
没有起到作用,该方法用在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>
效果如下:
在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 />
)
效果如下:
得到了想要的效果,对应部分都进行了换行展示。
(完)