为每个元素设置不同的 React Popper tooltip
Set different React Popper tooltip for each element
我正在使用 React popper 来显示表单中输入字段的附加信息。问题是,当我显示超过 1 个元素的工具提示时,它会显示相同的工具提示。如何为每个字段显示不同的工具提示。
这是我在我的组件中使用的代码
https://codesandbox.io/s/hungry-gould-modgk?fontsize=14&hidenavigation=1&theme=dark
// Popper Tooltip Props;
const {
getArrowProps,
getTooltipProps,
setTooltipRef,
setTriggerRef,
visible,
} = usePopperTooltip({
trigger: 'hover',
placement: 'right',
closeOnOutsideClick: false,
visible: controlledVisible,
onVisibleChange: setControlledVisible
})
return (
<TextBox
label="Title"
className="title-field"
name="title"
type="text"
isRequired={true}
/>
<div className="field-info" ref={setTriggerRef}>
<Icon size="medium">
<FontAwesomeIcon icon={faInfoCircle} size="lg" />
</Icon>
</div>
{visible && (
<div
ref={setTooltipRef}
{...getTooltipProps({ className: 'tooltip-container' })}
>
Tooltip element
<div {...getArrowProps({ className: 'tooltip-arrow' })} />
</div>
)}
<TextBox
label="Price"
className="price-field"
name="price"
type="text"
isRequired={true}
/>
<div className="field-info" ref={setTriggerRef}>
<Icon size="medium">
<FontAwesomeIcon icon={faInfoCircle} size="lg" />
</Icon>
</div>
{visible && (
<div
ref={setTooltipRef}
{...getTooltipProps({ className: 'tooltip-container' })}
>
Tooltip element
<div {...getArrowProps({ className: 'tooltip-arrow' })} />
</div>
)}
)
[1]: https://i.stack.imgur.com/oHuBA.png
每个工具提示都需要自己的可见状态变量。您可以像这样创建自己的工具提示组件吗:
const MyTooltip = ({tooltipText}) => {
const [isVisible, setIsVisible] = useState(false)
const {
getArrowProps,
getTooltipProps,
setTooltipRef,
setTriggerRef,
visible,
} = usePopperTooltip({
trigger: 'hover',
placement: 'right',
closeOnOutsideClick: false,
visible: isVisible,
onVisibleChange: setIsVisible
})
return (
<>
<div className="field-info" ref={setTriggerRef}>
<Icon size="medium">
<FontAwesomeIcon icon={faInfoCircle} size="lg" />
</Icon>
</div>
{visible && (
<div
ref={setTooltipRef}
{...getTooltipProps({ className: 'tooltip-container' })}
>
{tooltipText}
<div {...getArrowProps({ className: 'tooltip-arrow' })} />
</div>
)}
</>
)
}
然后你可以像这样使用组件:
<TextBox
label="Title"
className="title-field"
name="title"
type="text"
isRequired={true}
/>
<MyTooltip tooltipText="Tooltip Element 1" />
<TextBox
label="Price"
className="price-field"
name="price"
type="text"
isRequired={true}
/>
<MyTooltip tooltipText="Tooltip Element 2" />
我正在使用 React popper 来显示表单中输入字段的附加信息。问题是,当我显示超过 1 个元素的工具提示时,它会显示相同的工具提示。如何为每个字段显示不同的工具提示。
这是我在我的组件中使用的代码
https://codesandbox.io/s/hungry-gould-modgk?fontsize=14&hidenavigation=1&theme=dark
// Popper Tooltip Props;
const {
getArrowProps,
getTooltipProps,
setTooltipRef,
setTriggerRef,
visible,
} = usePopperTooltip({
trigger: 'hover',
placement: 'right',
closeOnOutsideClick: false,
visible: controlledVisible,
onVisibleChange: setControlledVisible
})
return (
<TextBox
label="Title"
className="title-field"
name="title"
type="text"
isRequired={true}
/>
<div className="field-info" ref={setTriggerRef}>
<Icon size="medium">
<FontAwesomeIcon icon={faInfoCircle} size="lg" />
</Icon>
</div>
{visible && (
<div
ref={setTooltipRef}
{...getTooltipProps({ className: 'tooltip-container' })}
>
Tooltip element
<div {...getArrowProps({ className: 'tooltip-arrow' })} />
</div>
)}
<TextBox
label="Price"
className="price-field"
name="price"
type="text"
isRequired={true}
/>
<div className="field-info" ref={setTriggerRef}>
<Icon size="medium">
<FontAwesomeIcon icon={faInfoCircle} size="lg" />
</Icon>
</div>
{visible && (
<div
ref={setTooltipRef}
{...getTooltipProps({ className: 'tooltip-container' })}
>
Tooltip element
<div {...getArrowProps({ className: 'tooltip-arrow' })} />
</div>
)}
)
[1]: https://i.stack.imgur.com/oHuBA.png
每个工具提示都需要自己的可见状态变量。您可以像这样创建自己的工具提示组件吗:
const MyTooltip = ({tooltipText}) => {
const [isVisible, setIsVisible] = useState(false)
const {
getArrowProps,
getTooltipProps,
setTooltipRef,
setTriggerRef,
visible,
} = usePopperTooltip({
trigger: 'hover',
placement: 'right',
closeOnOutsideClick: false,
visible: isVisible,
onVisibleChange: setIsVisible
})
return (
<>
<div className="field-info" ref={setTriggerRef}>
<Icon size="medium">
<FontAwesomeIcon icon={faInfoCircle} size="lg" />
</Icon>
</div>
{visible && (
<div
ref={setTooltipRef}
{...getTooltipProps({ className: 'tooltip-container' })}
>
{tooltipText}
<div {...getArrowProps({ className: 'tooltip-arrow' })} />
</div>
)}
</>
)
}
然后你可以像这样使用组件:
<TextBox
label="Title"
className="title-field"
name="title"
type="text"
isRequired={true}
/>
<MyTooltip tooltipText="Tooltip Element 1" />
<TextBox
label="Price"
className="price-field"
name="price"
type="text"
isRequired={true}
/>
<MyTooltip tooltipText="Tooltip Element 2" />