how to position MUI tooltip dynamically inside a container dynamically so that when the element is near the edge of the container it does not overflow - material-ui

Question

enter image description here
For example—
in this image when i hover on the button (click) on the left side, the tooltip is going out of the red bordered container.
same thing happens for the right side button.
i want to change the tooltip position dynamically so that it stays inside the container for both the cases.
p.s - new to stackoverflow. If anything is wrong please pardon.
thanks in advance.
<Tooltip
title=“aaa”
arrow
placement=“bottom”
>
<button> click </button>
</Tooltip>
this is code for the MUI tooltip.i tried to look for props that can help me with this but failed.

Answer 1

You can do this by accessing the PopperProps in the Tooltip component.
The documentation for this is a little buried, but Tooltip has access to all MUI Popper component properties, which contain the popperOptions. Within the API properties definitions for the Popper component, MUI refers you to popper.js docs. These docs will then tell you how you can apply PopperProps to get different behaviors. Check out popper.js.org for further info.
const boundingElement = useRef();
[...]
<div
ref={boundingElement}
>
<Tooltip
title="Tooltip Tooltip Tooltip Tooltip Tooltip"
PopperProps={{
popperOptions: {
modifiers: [
{
name: "preventOverflow",
options: {
boundary: boundingElement.current
}
}
]
}
}}
>
<div>Tooltip Hover Div</div>
</Tooltip>
</div>