search

SAP / ui5-webcomponents-react

A wrapper implementation for React of the UI5 Web Components that are compliant with the SAP Fiori User Experience
https://sap.github.io/ui5-webcomponents-react/
Apache License 2.0
435 stars 97 forks source link

[BulletChart, ObjectPage]: [ Tooltip for chart is hidden behind Header and tabs whe I put it in subHeader]. #5114

Closed sheva3666 closed 11 months ago

sheva3666 commented 11 months ago

Describe the bug

When I add title for page and "BulletChart" to the subHeader of "ObjectPage" and try to hover chart to see the tooltip, tooltip is hidden behind the header and behind the Tabs if they are exist. (You can see it in Isolated example).

Isolated Example

https://codesandbox.io/p/sandbox/hopeful-thunder-s3x3fk?file=%2Fsrc%2FApp.tsx%3A18%2C31

Reproduction steps

  1. Use ObjectPage
  2. Add title
  3. Add subHeader with BulletChart inside
  4. Try to hover chart for see tooltip
  5. Tooltip hidden behind header content ...

Expected Behaviour

Tooltip should be visible for user.

Screenshots or Videos

Screenshot 2023-10-03 at 11 34 28

UI5 Web Components for React Version

"@ui5/webcomponents-react": "1.18.0",

UI5 Web Components Version

"@ui5/webcomponents": "1.16.0",

Browser

Chrome

Operating System

No response

Additional Context

No response

Relevant log output

No response

Declaration

Lukas742 commented 11 months ago

Hi @sheva3666

since the tooltip is absolute positioned, this is not supported out of the box, but can be achieved with CSS. I've created a codeSandbox that shows how this could be implemented.

Please note that I only tested it with the given example and since this approach is overwriting internal styles, I can't guarantee that it will work with other charts or configurations as well.