Set different React Popper tooltip for each element

Question

I am using React popper for displaying additional information for input fields in my form. The problem is that, when i am displaying Tooltip for more than 1 element, it displays the same tooltip. How can i display different tooltips for each field.

Here is the code i am using inside my Component

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

Coot3 · Accepted Answer · 2021-09-29T11:07:58.783

2

Each tooltip needs its own visible state variable. Can you create your own tooltip component like so:

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>
            )}
        </>
    )
}

Then you can use the component like this:

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

edited Sep 29 '21 at 11:07

answered Sep 29 '21 at 10:25

Coot3

195
1
12

Its not the text. Even if i change the text, it displays both the tooltip at once. – tkamath99 Sep 29 '21 at 10:25
Oh I get you. Then it is because you are using the same state 'visible' for both Tooltips. – Coot3 Sep 29 '21 at 10:27
but the visible prop is received through the usePopperTooltip function – tkamath99 Sep 29 '21 at 10:28
Well I haven't used React Popper but you'd need a 'visible' state variable for each popper you have to track whether it is visible or not. Maybe you'd need usePopperTooltip per tooltip. If you show me more context of how this component sits in your app i might understand more – Coot3 Sep 29 '21 at 10:35
So usePopperTooltip returns setTooltipRef, setTriggerRef and a visible State. You cannot replicate this function for more than 1 element. – tkamath99 Sep 29 '21 at 10:47
Yeah so can you not create a tooltip component that has its own usePopperTooltip? I'll edit my original comment as an example – Coot3 Sep 29 '21 at 10:57
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/237634/discussion-between-tkamath99-and-coot3). – tkamath99 Sep 29 '21 at 11:00

Set different React Popper tooltip for each element

1 Answers1