fix: stops custom tooltip from flickering when hovered, fixes #2206

[zewa666]

fixes #2206

This fixes the issue in such a way, that a timeout is added to debounce multiple quick enter/leave event combos. Additionally a 3s total timeout is added to remove the tooltip

2025-10-27_16h46_57.mp4

references #2206

[bolt-new-by-stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[zewa666]

so this would be a quick shot at fixing the issue but adds a new behavior with the auto-close after 3s (which most likely should be configurable via customTooltip options).

What do you think about this approach?

[codecov]

Codecov Report

❌ Patch coverage is 50.00000% with 11 lines in your changes missing coverage. Please review.
✅ Project coverage is 100.0%. Comparing base (f12818d) to head (0dd38bd).

Files with missing lines	Patch %	Lines
...es/custom-tooltip-plugin/src/slickCustomTooltip.ts	50.0%	11 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff            @@
##           master    #2207     +/-   ##
=========================================
- Coverage   100.0%   100.0%   -0.0%     
=========================================
  Files         196      196             
  Lines       17051    17073     +22     
  Branches     4639     4639             
=========================================
+ Hits        17051    17062     +11     
- Misses          0       11     +11     

Flag	Coverage Δ
angular	100.0% <ø> (ø)
universal	?

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[pkg-pr-new]

angular-slickgrid

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/angular-slickgrid@2207

aurelia-slickgrid

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/aurelia-slickgrid@2207

slickgrid-react

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/slickgrid-react@2207

slickgrid-vue

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/slickgrid-vue@2207

@slickgrid-universal/binding

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/binding@2207

@slickgrid-universal/common

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/common@2207

@slickgrid-universal/composite-editor-component

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/composite-editor-component@2207

@slickgrid-universal/custom-footer-component

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/custom-footer-component@2207

@slickgrid-universal/custom-tooltip-plugin

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/custom-tooltip-plugin@2207

@slickgrid-universal/empty-warning-component

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/empty-warning-component@2207

@slickgrid-universal/event-pub-sub

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/event-pub-sub@2207

@slickgrid-universal/excel-export

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/excel-export@2207

@slickgrid-universal/graphql

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/graphql@2207

@slickgrid-universal/odata

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/odata@2207

@slickgrid-universal/pagination-component

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/pagination-component@2207

@slickgrid-universal/row-detail-view-plugin

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/row-detail-view-plugin@2207

@slickgrid-universal/rxjs-observable

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/rxjs-observable@2207

@slickgrid-universal/text-export

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/text-export@2207

@slickgrid-universal/utils

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/utils@2207

@slickgrid-universal/vanilla-bundle

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/vanilla-bundle@2207

@slickgrid-universal/vanilla-force-bundle

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/vanilla-force-bundle@2207

commit: 0dd38bd

[ghiscoding]

wow this seems like an extreme usage lol... that seems like a lot of code, why not simply not show the tooltip if there's not enough space when doing the positioning of the tooltip? That would be much simpler and you wouldn't have to add listener to all types of mouse events like you just did.

https://github.com/zewa666/slickgrid-universal/blob/0dd38bdf8a7093558648e503c84fba5d911d4141/packages/custom-tooltip-plugin/src/slickCustomTooltip.ts#L549-L555

[zewa666]

the issue happens for us primarily due to grids with more columns than available width. if only a part of the last column is in the visible area, the available space is limited hence the mouseover. not showing the tooltip would feel more like broken UX in said case as a non tech savy user might not get the underlying reason for the missing tooltip

and yep, its quite some code, but essentially all it does is debouncing current events

[ghiscoding]

and yep, its quite some code, but essentially all it does is debouncing current events

but why not use the suggestion I made to do the check in the tooltip reposition function? I think, and would much prefer, less lines of code for what seems like a little check to do before positioning it.

[zewa666]

oh ok didnt notice that on phone. will check that out tomorrow 👍

[ghiscoding]

hey so I'm not sure if you'll have time to update this PR soon but I'm probably going to go with a release on Monday-Tuesday..ish since I think I'm done with everything including the new Hybrid Selection Model