title: How do I get text onto a newline in bootstrap tooltips?
body: <p>I have my HTML like this:</p>
  
  <pre><code>&lt;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}} &amp;#013;{% endfor %}"&gt;&lt;/i&gt;&lt;/td&gt;
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>Product 1 x 25
  </code></pre>
  
  <p>So, what I want to be able to do is, the next Product, should be in a new line like this:</p>
  
  <pre><code>Product 1 x 25
  Product 2 X 43
  </code></pre>
  
  <p>Instead, I'm getting this: <code>Product 1 X 25 Product 2 X43</code></p>
  
  <p>I looked at numerous other answers on Stackoverflow and I tried these things:</p>
  
  <ul>
  <li>Adding <code>data-html=true</code> and using a <code>&lt;br&gt;</code> to separate the sentences</li>
  <li>Using <code>&amp;#013;</code></li>
  <li><p>Adding the following CSS:</p>
  
  <p>.tooltip-inner {
                 white-space:pre-wrap;
                 min-width: 100px;
              }</p></li>
  </ul>
  
  <p>But none of these methods worked. What am I missing?</p>