Tooltip don't re-render content

Question

Hi Syncfusion Team,I'm using the Tooltip component and want to use the content Template to show content. I want to use a template by passing in a JSX element, and the data will change after calling the API. Link sample: https://stackblitz.com/edit/react-9kkhrm-zbnpsv?file=index.js In my example: after calling API, data were changed, but the tooltip's content isn't re-rendered.How can I fix to reach my requirement?Thank you in advance for your support.

Indhumathy Loganathan · Accepted Answer

Hi Ton,The reported issue occurs due to the second time Component
function triggering, so the span element is again rendered. This is the behaviour
of React and we tried to prevent this. Since it is not working properly as
expected, we have come up with a workaround. You can use the afterOpen
event to remove the element from the Tooltip content.Check the below code snippet.

function
  afterOpen(args) {
   
    args.element
       
  .getElementsByClassName('e-tip-content')[0]
       
  .getElementsByTagName('div')[1]
        .remove();
   
  }

Sample: https://stackblitz.com/edit/react-9kkhrm-b811zn?file=index.jsPlease check whether the shared suggestion suitable for you and
let us know if you need any further assistance.Regards,Indhumathy L

Indhumathy Loganathan · Answer

Hi Ton,Greetings from Syncfusion support.We have validated the reported issue in the shared sample. To overcome the reported issue, we suggest you to update the Tooltip content value once it is retrieved from its API using the beforeRender event. Check the below code snippet for reference. function beforeRender(args) { document.getElementById('tool').ej2_instances[0].content = data?.name; } return ( ... {data?.name || 'Empty'}} tabIndex={0} width="220px" height="30px" style={{ display: 'block', position: 'absolute', left: 'calc( 50% - 60px)', top: '45%', }} // windowCollision={true} target={`#source-mapping`} beforeRender={beforeRender} > {/* Button element */} Show Tooltip Please try this suggestion at your end and get back to us if you need any further assistance.Regards,Indhumathy L

Ton That Hung · Answer

It seems this solution doesn't meet my requirement. I need to use the tooltip's content like ReactNode so that I can use events like onClick,... You are using content as a string.

Indhumathy Loganathan · Answer

Hi Ton,In the
below sample, we have updated the exact React state updated value as Tooltip
content in the beforeRender event. As mentioned in our previous update,
you need to update the Tooltip content to refresh it in the UI as done in the
below sample.https://stackblitz.com/edit/react-9kkhrm-cfozt2?file=index.jsPlease check
the sample and try the same at your end. If we misunderstood, please share with
us a more clear explanation of your exact use case with the Tooltip component.
Based on that, we will assist you promptly.Regards,Indhumathy
L

Ton That Hung · Answer

Hi Indhumathy,I need to use the tooltip's content like the JSX element (image) Link sample: https://stackblitz.com/edit/react-9kkhrm-dx4mpf?file=index.jsThank you for your support.

Indhumathy Loganathan · Answer

Hi Ton,We have validated your requirement with the Tooltip component. You
can achieve your requirement by returning the content
property within the beforeRender event. Check the below code snippet.

function
  beforeRender(args) {
   
  this.content
  = () => {
   
    return <Component data={data}
  />;
   
  };
  }

Sample: https://stackblitz.com/edit/react-9kkhrm-k1q5m9?file=index.jsDocumentation: https://ej2.syncfusion.com/react/documentation/tooltip/content/#template-contentWe suggest you follow the exact same way in the above sample to
meet your requirement in the Tooltip component. Please let us know if you need
any further assistance.Regards,Indhumathy L

Ton That Hung · Answer

Thanks for your help.But the content in your sample is repeated 2 times (Image). Your solution is very good if don't has this issue.

Ton That Hung · Answer

Oh, thanks for your support.

Indhumathy Loganathan · Answer

Hi Ton,Thanks for
the update. Please get back to us if you need any further assistance.Regards,Indhumathy
L

Ton That Hung · Answer

Hi Indhumathy,Seems this solution has an error when I use open mode as Click​Link sample: https://stackblitz.com/edit/react-9kkhrm-b1lsrg?file=index.js﻿﻿

Indhumathy Loganathan · Answer

Hi Ton,We have
already considered the reported issue as a bug on our end in the React Tooltip
component. We will include this fix in our weekly patch release on October
25, 2022. You can track the status through the below link.https://www.syncfusion.com/feedback/34538/facing-an-error-while-clicking-on-the-outside-target-in-the-react-tooltipWe
appreciate your patience.Regards,Indhumathy
L

LeoLavanya Dhanaraj · Answer

Hi Ton,Sorry for the inconvenience.Due to unforeseen circumstances, we are unable to include
the fix in this release. We have fixed this internally and the fix for this
issue will be included in our Volume 3 SP release, which is expected to be
rolled out on November 8, 2022. We appreciate your patience.Regards,Leo Lavanya Dhanaraj

LeoLavanya Dhanaraj · Answer

Hi Ton,

The issues with “When
setting opensOn as Click with a dynamic content in the
React Tooltip component” have been resolved
in 20.3.56 release. To access this fix, we suggest you update the
package to 20.3.56 and we include the sample in the latest version
for your reference.Sample : https://stackblitz.com/edit/react-9kkhrm-zbqwga?file=index.jsRelease notes : https://ej2.syncfusion.com/react/documentation/release-notes/20.3.56/?type=all#tooltipFeedback : https://www.syncfusion.com/feedback/34538/facing-an-error-while-clicking-on-the-outside-target-in-the-react-tooltipRegards,Leo Lavanya Dhanaraj