How do I get text onto a newline in bootstrap tooltips?

Question

I have my HTML like this:

<i class="fa fa-cubes" data-toggle="tooltip" data-html="true" data-placement="top" title="{% for product in products.category.all %} {{product.description}} x {{product.quantity}} &#013;{% endfor %}"></i></td>

So, what this does is for every product in the category, it'll display the name of the product and the quantity of the product on hover. For example:

Product 1 x 25

So, what I want to be able to do is, the next Product, should be in a new line like this:

Product 1 x 25
Product 2 X 43

Instead, I'm getting this: Product 1 X 25 Product 2 X43

I looked at numerous other answers on Stackoverflow and I tried these things:

• Adding data-html=true and using a <br> to separate the sentences
• Using 


• Adding the following CSS:

  .tooltip-inner { white-space:pre-wrap; min-width: 100px; }

But none of these methods worked. What am I missing?

Answer 1

In Bootstrap 5.0 and later, to enable HTML inside the tooltip, use:

data-bs-html="true"

and not (make note of the "bs"):

data-html="true"

Answer 2

Use 
 as the sequence to insert a new line. This would help on all the browsers - Chrome, Firefox, IE with some optimizations of their own.