I'm using e-charts version 5.3.3 to render charts. When I'm trying to plot a chart inside another container and hover on any of the chart label for tooltip, observed that my tooltip is getting truncated and going behind the parent container and not displaying completely. But the expected behavior is I want tooltip to be shown on top of the parent container and not to be truncated, so that the label is visible completely Attaching the Screenshot of issue below [1]: https://i.stack.imgur.com/TCdZr.png
parent container CSS:
display: block;
transform: translate3d(437px, 0px, 0px);
width: 433px;
height: 278.5px;
margin-right: 4px;
box-sizing: border-box;
z-index: 1;
position: absolute;
overflow: hidden;
transition: .3s;
Tooltip CSS:
position: 'absolute',
display: 'block',
borderStyle: 'solid',
whiteSpace: 'nowrap',
zIndex: '9999999',
boxShadow: 'rgba(0, 0, 0, 0.2) 1px 2px 10px',
transition: 'opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1) 0s, visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1) 0s, transform 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s',
backgroundColor: 'rgb(255, 255, 255)',
borderWidth: '1px',
borderRadius: '4px',
color: 'rgb(102, 102, 102)',
font: '14px / 21px OpenSans-Regular',
padding: '10px',
top: '0px',
left: '0px',
transform: 'translate3d(-597px, 87px, 0px)',
borderColor: 'rgb(84, 112, 198)',
pointerEvents: 'none',
visibility: 'hidden',
opacity: '0'
Any help will be appreciated