The Tooltip component is being cutting at the border

[Pedrocaloi]

Is there an existing issue for this?

• I have searched the existing issues

Code of Conduct

• 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]

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.