Bootstrap 4 tooltip text formatting

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!

as you say in the second image it is already creating new line isn't it? — Manjuboyz, Mar 25 '20 at 11:17
Does this answer your question? [Add line break to tooltip in Bootstrap 3](https://stackoverflow.com/questions/19001766/add-line-break-to-tooltip-in-bootstrap-3) — Rachel Gallen, Mar 25 '20 at 11:22
@Manjuboyz Unfortunetly not. When I try to deploy your solution in my project this code does not result in anything, might be conflicting with some of the Bootstrap stuff. — Bajjjjj, Mar 25 '20 at 16:57
Hmmm strange! never happened to me, have been using this for every instance. — Manjuboyz, Mar 25 '20 at 16:58
@Manjuboyz Yes very, when I use the code I can see it in the inspecter but nothing appears on the page itself exept for some whitespace where the element is placed. But thanks for the help I appriciate it! — Bajjjjj, Mar 25 '20 at 17:07

Manjuboyz · Answer 1 · 2020-03-25T11:28:06.010

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>

score 0 · Accepted Answer · answered Mar 25 '20 at 17:43

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'">

Bootstrap 4 tooltip text formatting

2 Answers2