Material UI Tooltip для отображения контента в несколько строк

Question

Я использую интерфейс материалов для компонентов React. Посмотрите код ниже и посмотрите, как я связываю свойство заголовка всплывающей подсказки.

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