CODEWITHSUNDEEP
htmlcssbootstrap-4
Bajjjjj
Bajjjjj

Reputation: 50

Bootstrap 4 tooltip text formatting

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:
Godaddy Tooltip

Currently my own tooltips look like this:
enter image description here
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!

Upvotes: 1

Views: 1060

Answers (2)

Bajjjjj
Bajjjjj

Reputation: 50

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

Upvotes: 0

Manjuboyz
Manjuboyz

Reputation: 7066

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>

Upvotes: 1

Related Questions