[UI] Fix the database tooltip hidden problem

[peterhashair]

Description:

Fixes: #19244

When the window reaches a certain size like a mobile, tablet when the.dataTableScroller applied overflow-x: scroll that hides the outside tooltip, same as when the page scroll down when the sticky table header reaches the top.

I changed the js when those happened, the tooltip shows below the header instead of above the header.

Review

• Functional review done
• Potential edge cases thought about (behavior of the code with strange input, with strange internal state or possible interactions with other Matomo subsystems)
• Usability review done (is anything maybe unclear or think about anything that would cause people to reach out to support)
• Security review done
• Wording review done
• Code review done
• Tests were added if useful/possible
• Reviewed for breaking changes
• Developer changelog updated if needed
• Documentation added if needed
• Existing documentation updated if needed

[bx80]

@peterhashair One thing I've noticed is if you scroll down so that the datatable header is only a couple of pixels away from the top of the viewport then the tooltip will still show at the top even though most of it cannot be seen. Perhaps there should be an offset in the calculation so if there is <25px(?) above the header then the tooltip is shown below?

[bx80]

It would also be good to test this fix using Safari in case there is also an issue with the recent z-index header change.

[peterhashair]

@bx80 fixed it, just wondering if we could change the tooltip, and display it below the header as always, because, it's really hard to calculate the tooltip scrolling hidden point because the tooltip heigh is various. Test Safari works.

[bx80]

The 100px offset seem to work well, it probably doesn't need to cover every possible tooltip size, just enough that the user can see where the tooltip is and scroll up or down to see it. 👍

The zen mode icon seems to have moved position after this change and it's changed a lot of the UI test screenshots. It might be worth seeing if that could be avoided or if not the screenshots will need to be updated.

[peterhashair]

@bx80 that's coursed by another PR, Create fixes there #19289

[bx80]

Ok, I suppose both PRs will need to be merged at the same time then once those tests have completed successfully.