'How to override Material UI's Tooltip placement?

I am trying to override the tooltip position by css or prop and show the tooltip on top of the button instead of bottom. I have tried all method mentioned in API doc and still have no luck. For example, placement='top' has no effect on tooltip. Wish I can get suggestion here. Cheers!

Code:

const styles = theme => ({
    test: {
        tooltipPlacementTop: {
            top: "10px",
        },
        "& .MuiTooltip-popper": {
            marginTop: '100px',
            top: "100px",
        },
    },
});
<Tooltip placement="top" PopperProps={{className: classes.test}} title="test">
    <Button />
</Tooltip>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'How to override Material UI's Tooltip placement?

Sources

Related Questions