Установите разные всплывающие подсказки React Popper для каждого элемента

Question

Я использую 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

Answer 1

Каждой подсказке нужна собственная переменная видимого состояния. Можете ли вы создать свой собственный компонент всплывающей подсказки следующим образом:

      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" />