Как поместить всплывающую подсказку в диаграммах с фиксированной позицией внутри div?

Question

У меня есть div с позицией relative, и внутри него размещен график из библиотеки recharts. Когда точка мыши наведена на края диаграммы, всплывающая подсказка обрезается рамкой элемента div. Родительский div, в который помещается диаграмма, имеет относительную позицию, поэтому я дал всплывающей подсказке фиксированную позицию, чтобы она помещалась поверх родительского div без разрезания рамкой div. Но всплывающая подсказка не занимает фиксированную позицию в соответствии с родительским div, вместо этого берет порт просмотра браузера и корректирует позицию как фиксированную.

.parent-div {
  position: relative; 
  cursor: default; 
  width: 313px; 
  height: 240px;
}

.tooltip {
  pointer-events: none; 
  position: fixed; 
  top: 0px;
}

<Tooltip
    cursor={{ fill: "#F2EFED" }}
    content={<CustomTooltip />}
    formatter={value => new Intl.NumberFormat("en").format(value)}
/>

function CustomTooltip({ payload, label, active }) {
    if (active) {
        return (
          <div className={styles.customtooltip}>
            {!payload[0].payload.extra && <h6 className={styles.label}>{`${label} : ${payload[0].value}`}</h6>}
            Intl.NumberFormat("en").format(`${payload[0].value}`)}</h6>
            )}
          </div>
        );
      }

текущий результат: всплывающая подсказка диаграммы помещается в верхнюю часть экрана.

ожидаемый результат: всплывающая подсказка должна быть помещена в родительский элемент div сфиксированная позиция.

Возможно ли достичь этого только через css или я что-то упустил в библиотеке recharts?

Помощь будет принята с благодарностью.