The Tooltip component is being cutting at the border

FormidableLabs / victory

A collection of composable React components for building interactive data visualizations

http://commerce.nearform.com/open-source/victory/

Other

11.02k stars 524 forks source link

The Tooltip component is being cutting at the border #2856

Closed Pedrocaloi closed 3 months ago

Pedrocaloi commented 7 months ago

Is there an existing issue for this?

[X] I have searched the existing issues

Code of Conduct

[X] I agree to follow this project's Code of Conduct

Victory version

37.0.1

Code Sandbox link

No response

Bug report

The tooltip is being cutting down at the edge of the div that contains the victory pie and the tooltip itself. 
This tooltip should have a zIndex that allows it to be overlaid on the rest of the components.

This is a ScreenShoot of the bug 
https://imgur.com/a/Gzl9qzA

Steps to reproduce

No response

Expected behavior

The tooltip should have a zIndex that allows it to be overlaid on the rest of the components.

It should look like this
https://imgur.com/a/jd8xyiC

Actual behavior

The tooltip is being cutting in the border of the div.

This is an ScreenShoot of one of my charts components, that it has the tooltip component. 
https://imgur.com/a/DAh7FOA

Environment

- Device: Desktop
- OS: Windows 11
- Node: 18.17.0
- npm: 10.5.0

carbonrobot commented 7 months ago

Do you have a reproduceable sample of code so I can help with the CSS?

Tooltips render in their own SVG container inside a div with a z-index of 99, and positioned absolutely. This is contained within a div with its height and width set to 100%. Because of this, the tooltip can be cutoff if the size of the VictoryContainer is restricted by its parent HTML element.

<div class="VictoryContainer" style="height: 100%; width: 100%; pointer-events: none; touch-action: none; position: relative;">
  <div style="z-index: 99; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;">
    <svg width="400" height="400" viewBox="0 0 400 400" style="overflow: visible; width: 100%; height: 100%;"></svg>
  </div>
</div>

Example of container (working)

In your example, the containing HTML element that you placed the Victory Chart inside of is clipping the tooltip, likely due to its position setting, or its overflow setting.

github-actions[bot] commented 4 months ago

This issue is stale because it has been open for 90 days with no activity. If there is no activity in the next 7 days, the issue will be closed.

github-actions[bot] commented 3 months ago

This issue was closed because it has been inactive for 7 days since being marked as stale. Please open a new issue if you believe you are encountering a related problem.