[英]How to show tooltips for react-select?
I need to show tooltips for react-select container (not for a separate options) using react-tooltip
library.我需要使用react-tooltip
库显示 react-select 容器的工具提示(不是单独的选项)。
I made my own SelectContainer
component based on the original one and added there data-tip
and data-for
HTML attributes.我基于原始组件制作了自己的SelectContainer
组件,并在其中添加了data-tip
和data-for
HTML 属性。 Tooltip shows up but when I change selected value it disappears and is not displayed any more.工具提示出现,但当我更改所选值时,它消失并且不再显示。
Here is my code:这是我的代码:
const getSelectContainer = options => props => {
return (
<components.SelectContainer
{...props}
innerProps={{
...props.innerProps, ...{
'data-tip': options.tooltipText,
'data-for': options.tooltipId,
}
}}
/>
)
}
const CustomSelect = (props) => {
const tooltipId='tooltip_id'
const tooltipText='tooltip'
const selectedOption = colourOptions.filter(option => option.value === props.value)
return (
<div>
<ReactTooltip effect="solid" html={true} place="bottom" id={tooltipId} />
<Select
defaultValue={colourOptions[4]}
value={selectedOption}
options={colourOptions}
classNamePrefix="react-select"
onChange={item => props.onChange(item.value)}
className="my-select"
components={{
SelectContainer: getSelectContainer({
tooltipText:tooltipText,
tooltipId:tooltipId
})
}}
/>
</div>
)
}
class Page extends Component {
constructor (props) {
super(props)
this.state = {
selectValue: 'red'
}
}
render () {
const onChange = (value)=> {
this.setState({selectValue: value})
//alert(value)
}
return (
<CustomSelect
value={this.state.selectValue}
onChange={onChange}>
</CustomSelect>
)
}
}
See full example here : 在此处查看完整示例:
If I wrap Select
with another <div>
and assign tooltip HTML attributes to it everything works correctly but I don't want to add one more DOM element just for that.如果我用另一个<div>
包装Select
并为其分配工具提示 HTML 属性,则一切正常,但我不想为此再添加一个 DOM 元素。
What can I do to show tooltips after changing selection?更改选择后如何显示工具提示?
Try rebuilding the react-tooltip when the state changes.尝试在状态更改时重建 react-tooltip。
useEffect(() => {
ReactTooltip.rebuild();
}, [state]);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.