1. Home
  2. Forum
  3. Vue
  4. Flicker issue while using clipmode with tooltip in data grid

Flicker issue while using clipmode with tooltip in data grid

I used clipMode="EllipsisWithTooltip" inside the ejs-grid. Tooltip is coming for long texts but it is having a flickering effect when mouse hovers over it. Initially I gave the tooltip inside queryCellInfo and it worked fine but it is affecting the performance of the grid while loading. How can I prevent the flicker while hovering?
Code sample <ejs-grid clipMode="EllipsisWithtooltip"><e-columns></e-columns></ejs-grid>


4 Replies
RR Rajapandi Ravi Syncfusion Team December 27, 2024 04:48 PM UTC

Hi Sreevatsan,


Greetings from Syncfusion support


Based on your query it appears that you are encountering a flickering problem in the Grid when the tooltip is coming for the long text when you use the clipMode as EllipsisWithTooltip in the Grid initialization.


To investigate further, we have prepared a sample using clipMode as EllipsisWithTooltip and tried to reproduce the flickering issue at our end, but it was working fine and function as expected. For your convenience we have attached a sample below to demonstrate the setup we used. Please refer the below code example, sample and video demo for more information.


App.vue

   <ejs-grid ref='grid' clipMode='EllipsisWithTooltip' style="padding: 5px 5px" :dataSource='data' height='315' >

            <e-columns>

                .  .  .  .  .  .  .  .  .  .  .  .  .

                .  .  .  .  .  .  .  .  .  .  .  .  .

                .  .  .  .  .  .  .  .  .  .  .  .  .

            </e-columns>

        </ejs-grid>


Sample: https://stackblitz.com/edit/zh8d8aqf-hpqetlyg?file=src%2FApp.vue


Video demo: Check the attachment.


Since we are not able to identify your implementation from your shared information, kindly share the below details


1)         Share the complete Grid rendering code. This will allow us to review your customizations and the features you have utilized.

2)         Share the issue scenario in video demonstration format.

3)         Share your Syncfusion package version.

4)         Share any issue reproducible sample or try to reproduce the issue with our shared sample that would be helpful for us to validate and provide better solution.


Regards,

Rajapandi R


Attachment: 195623vd_583c4454.zip

SR Sreevatsan replied to Rajapandi Ravi December 31, 2024 04:21 AM UTC

Added screen recording from your example. You can see flicker when you hover over the column header. 


Attachment: Flicker_issue_8837a240.rar

RR Rajapandi Ravi Syncfusion Team January 2, 2025 02:49 PM UTC

Sreevatsan,


Thanks for the update.


We have confirmed that the reported scenario is an issue from our side and logged it as “Flickering Issue Occurs When Using ClipMode as EllipsisWithTooltip”. Thank you for taking the time to report this issue and helping us improve our product. At Syncfusion, we are committed to fixing all validated defects (subject to technical feasibility and Product Development Life Cycle ) and will include the defect fix in our upcoming patch release which will be rolled out on “January 21st , 2025”.


You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through the below link,


Feedback: https://www.syncfusion.com/feedback/64408/flickering-issue-occurs-when-using-clipmode-as-ellipsiswithtooltip

Disclaimer: "Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization".


RR Rajapandi Ravi Syncfusion Team January 21, 2025 09:07 AM UTC

Sreevatsan,


We are glad to announce that, we have included the fix for the issue “Flickering Issue Occurs When Using ClipMode as EllipsisWithTooltip” our 28.1.41 release. So please upgrade to our latest version of the Syncfusion package to resolve the reported issue.


Root Cause: The header contains headercelldiv, headertext, and filtermenudiv elements. On hovering, mousemove and mouseout actions are triggered. Each mousemove action opens the tooltip, and each mouseout action closes the tooltip, causing frequent flickering.


Solution: The issue was fixed by closing the tooltip only on the mouseout action when the previous and current elements are not the same, or when the related target element and the current element are not the same. The tooltip is opened only when both the current and previous elements are different.


Sample: https://stackblitz.com/edit/zh8d8aqf-nruscbcd?file=src%2FApp.vue


Feedback: https://www.syncfusion.com/feedback/64408/flickering-issue-occurs-when-using-clipmode-as-ellipsiswithtooltip


We thank you for your support and appreciate your patience in waiting for this release. Please get back to us if you need any further assistance.


Loader.
Up arrow icon