Tooltip doesn't close sometimes

[Glen Alexander]

Hi, we have an issue with the tooltip where we have stacked bars that are close to each other, with each having a tooltip on hover. Occasionally when hovering over the bars the previously opened tooltip stays open until we refresh the page. Is this a result of have 2 different tooltips so close to each other? If so, how can we resolve this?

[Muthukrishnan Kandasamy]

 

Hi Glen, 

 

Thanks for contacting Syncfusion support. 

 

We have validated your reported problem in Tooltip component. We were unable to reproduce your reported problem in Tooltip component, the Tooltip works fine in our issue validation sample. Please refer to the below link of validation sample. 

 

https://stackblitz.com/edit/angular-tooltip-open?file=app.component.html 

 

If the issue still persists, please share some additional details. It will be help us to provide you the prompt solution. 

 

1.  Share us the Tooltip rendering code block. 

2.  If possible, share the issue replicating sample or else replicate your reported issue in the shared sample. 

3.  If facing any script error, share the screenshots. 

4.  Share us the screen recorded video with issue replicating steps. 

 

 

Regards, 

Muthukrishnan K

[Glen Alexander]

Hi, I have attached our code, plus a video of the issue occuring. You'll see in the video we have progress bars that are stacked, each having a tooltip.

Attachment: tooltip_code_aacd615e.zip

[Shameer Ali Baig Sulaiman Ali Baig]

Hi Glen, 

 

We have validated your shared details. On analyzing your shared code, we found that you have created Tooltip component for every status bar element(div’s) in your application. We suggest you use same Tooltip component for all div elements instead of creating many Tooltips in your application. 

 

Please, check out the following sample in which we have created single Tooltip component. In the sample, when you hover a target element with target class, then based on the current target element details, we dynamically update the content of the Tooltip before it displays in the screen using its beforeRender event. 

 

Please, check out the sample below for your reference. 

 

https://stackblitz.com/edit/angular-multi-target-tooltip?file=app.component.html  

 

Please, let us know if you need any further assistance. 

 

Regards, 

Shameer Ali Baig S.