Material UI Tooltip to show content in multi line

Question

I am using Material UI for the React Components. See the below code and see how I am binding the Tooltip title property.

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

The property mytestMultiLineContent contains multiline data for e.g.

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

Since the data is set to title property it will be encoded out. Is there a way to achieve multi line string data to be displayed on Tooltip?

Answer 1

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

I found that the title props type is Node.

It means you can use HTML tags like this

<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

Just posting my final solution to this as might help.

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

The idea was to show multiple messages on the disabled button upon mouse over and thanks to "zynkn" for providing the clue.