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

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

由于数据设置为title属性，因此将被编码。有没有一种方法可以实现多行字符串数据显示在工具提示上？

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>

Answer 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”提供了线索。

材质UI工具提示以多行显示内容

2 个答案: