Search code examples
javascriptreactjstooltipdynamically-generatedprimereact

React tooltip - trying to show tooltip for elements dynamically just added with the same class


I use primereact tooltip component (https://primereact.org/tooltip/). Everything is okay except the target property. On page I can have a few elements with the same class and for them tooltip is working. But for element with that class that I just added from UI tooltip doesn't work. I understand that is 'cause that tooltip showed only for array of elements which already have been on page and after adding new element I should update target property.

Now I use this target property with classifier (target=".my-class"). I'm trying to send state parameters into that component for rerender but for target it does not affect.

return(
    <Tooltip id="tooltipImage" target=".open-in-tooltip-added-image" autoHide={false} showDelay={0} position={'right'}>
        <img src={require(`../img/${props.tooltipImage}`).default}
                 data-pr-tooltip="PrimeReact-Logo" height="500px" />
    </Tooltip>
)

In documentation I found methods and I think that method 'updateTargetEvents' is what I need but I don't understand where and how I can use it. Doesn't find any examples...

Screenshot: tooltip methods


Solution

  • Here is a Code Sandbox showing you how to use updateTargetEvents.

    Code Sandbox: https://codesandbox.io/s/summer-tree-z3rroi?file=/src/demo/DataTableBasicDemo.js:890-908

    Original Issue: https://github.com/primefaces/primereact/issues/3008