How to place the newline character inside tool tip in react bootstrap?

user_11298355 0
Viewed 646

I need to place a long paragraph inside the react bootstrap tool tip, I need to have new line in some places . I have tried \n ,br,em nothing gives me the new line.

export const TooltipMessages = {
 product:
   "Here we can see list of Product created and we can create a New product \r\n." +
   "We have 3 types of product Managed, Unmanaged and Source." +
   "Managed Product : Managed product is where by default all the environments are created 
    i.e Evaluation, Development," +
    "Test & Production." 
 }

and tool tip code 

<Tooltip id={`tooltip-top`} className="mytooltip">
      {ToolTipMessage.product}
</Tooltip>
react-bootstrap reactjs css
2 Answers

you can use something like this:

react fiddle

NOTE: It was not allowing me to add only fiddle so added only css and html code, full functionality is available in fiddle.

.display-linebreak {
  white-space: pre-line;
}
<div id="app">


</div>

user_35643590

//react tool tip allows these props

// to make explicitly multiline tooltip comments

multiline?: boolean;

// Add 1px white border

border?: boolean;

// Popup text color

textColor?: string;

// Popup background color

backgroundColor?: string;

// Popup border color

borderColor?: string;

// Popup arrow color

arrowColor?: string;

user_173880270
Related