Material UI Tooltip 以多行显示内容答案

【问题标题】：Material UI Tooltip to show content in multi lineMaterial UI Tooltip 以多行显示内容
【发布时间】：2020-03-04 17:28:32
【问题描述】：

我正在为 React 组件使用 Material UI。查看下面的代码，看看我是如何绑定 Tooltip 标题属性的。

<Tooltip disableFocusListener title={xyzStore.mytestMultiLineContent}   >
    <span>
        <Button color={'primary'}   variant={'contained'}
            onClick={this.handleXYZ}
            disabled={!xyzStore.canSaveXYZ}
        >
            <Icon fontSize={'small'} >{'save'}</Icon>
            <Typography variant={'button'} >{'Save XYZ'}</Typography>
        </Button>
    </span>
</Tooltip>

属性 mytestMultiLineContent 包含多行数据例如

"Reason is:  
I am good  
I am bad 
I am ugl"

由于数据被设置为标题属性，它将被编码出来。有没有办法实现Tooltip上显示多行字符串数据？

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

https://material-ui.com/api/tooltip/

我发现title的道具类型是Node。

这意味着你可以像这样使用HTML标签

<Tooltip disableFocusListener title={<span><p>first</p><p>second</p></span>}   >
    <span>
        <Button color={'primary'}   variant={'contained'}
            onClick={this.handleXYZ}
            disabled={!xyzStore.canSaveXYZ}
        >
            <Icon fontSize={'small'} >{'save'}</Icon>
            <Typography variant={'button'} >{'Save XYZ'}</Typography>
        </Button>
    </span>
</Tooltip>

【讨论】：

问题是工具提示将始终显示“第一”或“第二”属性是否具有值，因为标题具有非零长度
@Lin 你可以将你的文本转换成Node 形式
你说得对，标题道具支持渲染其他组件

【解决方案2】：

只是发布我的最终解决方案可能会有所帮助。

<Tooltip title={
    xyzStore.disabledMessages.length
        ? (<React.Fragment>
            {xyzStore.disabledMessages.map((value, index) => {
                return (<Typography key={index} variant='caption' display='block'>{value}</Typography>)
            })}
        </React.Fragment>)
        : ''
            }  >
    <span>
        <Button> 
            <Typography>{'Save'}</Typography>
        </Button>
    </span>
</Tooltip>

这个想法是在鼠标悬停时在禁用按钮上显示多条消息，感谢“zynkn”提供线索。

【讨论】：