React - 工具提示 Return 使用字符串连接的新行

Question

我正在尝试弄清楚如何使用正确的字符串连接使工具提示标题出现在多行上。

这是现在的样子：

First Name: John Last Name: Doe

这就是我正在尝试的工具提示：

First Name: John
Last Name: Doe

我正在使用 Material UI/Styled 组件。

我已经尝试使用 'whitespace' 和 multiline={true} 设置工具提示的样式，并尝试使用 
 和 '\n' 但它不起作用。我认为这是一个特例，所以我不确定该怎么做。

非常感谢任何帮助！！谢谢

<StyledToolbar>
        <StyledButtonsContainer>
                <IconButton>
                    <Tooltip title={`First Name: ${firstname}` + '\n' + `Last Name:${lastname} `}>
                        <AccountCircleIcon />
                    </Tooltip>
                </IconButton>
        </StyledButtonsContainer>
</StyledToolbar>

Answer 1

试试这个：

<Tooltip title={<>First Name: {firstname}<br/>Last Name: {lastname}</>}>
  <AccountCircleIcon />
</Tooltip>

React - 工具提示 Return 使用字符串连接的新行

React - Tooltip Return New Line Using String Concatenation

javascript

tooltip

styled-components

string-concatenation

carriage-return