React - Tooltip Return New Line Using String Concatenation

Question

I'm trying to figure out how I can make a Tooltip title appear on multiple lines using the correct string concatenation.

This is what it looks like now:

First Name: John Last Name: Doe

This is what I'm trying for the Tooltip:

First Name: John
Last Name: Doe

I'm using Material UI/Styled Components.

I've already tried styling the Tooltip with 'whitespace' and multiline={true} and tried 
 and '\n' but it did not work. I think it's a particular case so I'm not sure on how to do this.

Any help is greatly appreciated!! Thank you

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

Rostislav Maizlin · Accepted Answer · 2020-06-22 18:34:57Z

3

Try this:

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

answered Jun 22, 2020 at 18:34

Rostislav Maizlin

663 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

p_c Over a year ago

I did get an error about the format: "Missing parentheses around multilines JSX " The solution is to add parentheses before <> and after </>

Collectives™ on Stack Overflow

React - Tooltip Return New Line Using String Concatenation

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related