如何让Material UI Tooltip的高度随内部内容自适应调整

问题原因 #

你当前的样式配置里存在强制限制容器高度的属性，是导致文字溢出的核心原因：

• 显式设置了height: '100%'，会强制Tooltip高度绑定父容器高度，无法随内容自动拓展
• flex: none、flexGrow: 0、alignSelf: 'stretch'这几个弹性布局属性也会约束容器的自适应能力

修复方案 #

步骤1：移除限制类属性 #

直接删除height: '100%'配置，默认状态下MUI Tooltip本身就支持高度随内容自动适配。
如果没有特殊的外层flex布局要求，可以同时删除flex: 'none'、order: 1、alignSelf: 'stretch'、flexGrow: 0这几个冗余属性。

步骤2（可选）：固定宽度自动换行 #

如果需要固定Tooltip宽度，让长文本自动换行撑开高度，可以放开注释的width配置，额外增加文本换行规则：

const LightTooltip = withStyles(theme => ({
tooltip: {
    backgroundColor: "#8031A7",
    color: "white",
    boxShadow: theme.shadows[1],
    fontSize: 11,
    width: '232px',
    marginLeft: '38px',
    // 新增文本换行规则，避免长文本溢出
    whiteSpace: 'normal',
    wordWrap: 'break-word',
},
arrow: {
    color: "#8031A7",
},
}))(MaterialTooltip);

内容的提问来源于stack exchange，提问作者BIndu_Madhav