Estoy usando React popper para mostrar información adicional para los campos de entrada en mi formulario. El problema es que, cuando estoy mostrando información sobre herramientas para más de 1 elemento, muestra la misma información sobre herramientas. ¿Cómo puedo mostrar información sobre herramientas diferente para cada campo?
Aquí está el código que estoy usando dentro de mi Componente
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.pngCada información sobre herramientas necesita su propia variable de estado visible. ¿Puedes crear tu propio componente de información sobre herramientas así:
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> )} </> ) }Entonces puedes usar el componente así:
<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" />