dash_bio.Circos tooltip wrong position if page is scrolled

[VladimirFokow]

Bug description
If you scroll the page down and hover over the dash_bio.Circos graph to see the tooltip, it will be shown too low: the tooltip’s position is as if the page wasn’t scrolled at all.

Chrome, Firefox, Edge, Safari browsers all have this issue.

To Reproduce

• open https://dash-gallery.plotly.host/dash-circos
• scroll down a bit
• hover over the graph to see that the tooltip is not where it should be

Expected behavior
A Tooltip should be next to the mouse position, even if we scroll down the page.

Community Plotly post of this issue: here

Screenshots

[VladimirFokow]

May be relevant:

repo: https://github.com/nicgirault/circosJS
commit: nicgirault/circosJS@75fea92
says:

 ### 2.0.3 - 2017-04-05
 - Fix tooltip position when we can scroll on the page

---

Searching for "CircosJS" in dash-bio may be useful: here

Which version of CircosJS does dash-bio use? In search results I see both:

• nicgirault/circosJS (which seems to be the original repo)
• plotly/circosJS, branch matthewchan15-zoom-pan-svg which is forked from mtwichan/circosJS which is forked from nicgirault/circosJS

---

↓

However, plotly/circosJS, branch matthewchan15-zoom-pan-svg does include the above mentioned commit (that fixes the tooltips): plotly/circosJS@75fea92
So does it mean that this commit doesn't actually solve this tooltip issue?

But on the nicgirault/circosJS's demo: the tooltips work correctly when scrolling: https://nicgirault.github.io/circosJS/demo/
Why do they work correctly there but not in dash-bio?

Is the problem with dash-bio, with nicgirault/circosJS, or with plotly/circosJS, branch matthewchan15-zoom-pan-svg, and how would we fix it?

[alexanderfokau]

Hey!
This problem is caused by this commit in plotly/circosJS that added inline style "position: fixed" to the tooltip element. This commit is not present in other forks of this library.

There is a pull request with a fix: plotly/circosJS#2
Which is left unattended since 2021.