Bootstrap 4 tooltip text formatting - html

Question

I have been trying to make tooltips on my site look nice and have recently come across the tooltips on Godaddy.com which I would love to be able to replicate the text formating on:
Currently my own tooltips look like this:
This is my current code, it is very important that the tooltip appears when hovering over an image(looks messy I know but please ignore that):
<img src="image URL here" width="20" data-toggle="tooltip" data-placement="top" title="A short description of your project/solution (max 250 characters), will only be displayed on the home screen, not in your post! If you do not wish to use this leave 'None'">
What I am primarily trying to do is to be able to create new lines with in the Tooltip.
Any suggestions would be much appriciated!

Answer 1

You can do something like this:
you can add new line by adding <br /> between the contents, that should work for you.
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 220px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
text-align: justify;
/* This is what you need */
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
<div class="tooltip">Hover me
<span class="tooltiptext">A short description of your project/solution (max 250 characters), will only be displayed on the home screen. <br /> <br /> Second para not in your post! If you do not wish to use this leave 'None</span>
</div>

Answer 2

Fixed by adding
data-html="true"
This allowed me to use <br/> in the title text
The final code snippet:
<img src="image URL here" width="20" data-html="true" data-toggle="tooltip" data-placement="top" title="A short description of your project/solution (max 250 characters), will only be displayed on the home screen, not in your post! <br/> If you do not wish to use this leave 'None'">