Question 73024 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Is there a way to break a line in the title attribute of a Tooltip component? – Reactjs

I want the following tooltip to display its title in two different rows:

<Tooltip title="Line1 Line2">
...
</Tooltip>

So that, when I hover it I get

Line 1
Line 2

I tried inserting <br />, n and already with no success.

Thanks for reading !

Tags:

2

Answers


  1. 0

    Depending on how you use the title props (inside the Tooltip component), you could pass directly html or a component in it instead of giving string value. Example:

    
<Tooltip title={<div><p>First Line</p><p>Second Line</p></div}>
...
</Tooltip>

    With React Component :

    const ExampleComponent = () =>{
   return (
     <div>
       <p>First Line</p>
       <p>SecondLine</p>
     </div>
   )
}

... // Your rendered component
<Tooltip title={<ExampleComponent/>}>
...
</Tooltip>

    Hope I could help !

    Login or Signup to reply.
  2. 0

    Just use this &#013;
    It will break the line.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search