Material UI 工具提示以多行显示内容

Question

我正在为 React 组件使用 Material UI。请参阅下面的代码并了解我如何绑定工具提示标题属性。

<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包含多行数据，例如

<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>

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

Answer 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>