3

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 &#013;

  • Adding the following CSS:

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

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

DeA
  • 1,748
  • 3
  • 22
  • 41
  • Wait a second... why `min-width`? From my experience, the standard procedure for sloppy, desperate attempts at getting line breaks to work, is to set `max-width`. :) – Dragomok Jun 16 '17 at 19:13
  • 1
    Got it from this question here: https://stackoverflow.com/questions/17605450/force-one-line-break-in-bootstrap-tooltip Also, max-width doesn't do anything either! – DeA Jun 16 '17 at 19:31

3 Answers3

4

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"
Mdubya
  • 83
  • 5
  • This does not provide an answer to the question. Once you have sufficient [reputation](https://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](https://stackoverflow.com/help/privileges/comment); instead, [provide answers that don't require clarification from the asker](https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead). - [From Review](/review/late-answers/32078711) – IT goldman Jun 26 '22 at 19:07
3

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

Rajeev Ranjan
  • 3,588
  • 6
  • 28
  • 52
  • Or, if that doesn't work either, try ` &010;` (as in *carriage return, new line*), since it's the new line standard used by Windows and AFAIK compatible with other OS's. Although I have doubts whether using different entities can help here if ` ` didn't help. – Dragomok Jun 16 '17 at 19:09
  • 1
    Take a look at https://jsfiddle.net/k7c0qwzc/ and try any browser. (Code taken from w3school) – Rajeev Ranjan Jun 16 '17 at 20:06
  • Doesn't work, the ` ` is not making any difference, you can replace it with spaces and still get the same end result. The line breaks you get in the example was due to the text content rather than the supposed line break character (i.e. length of words). You can for example change the title to `FOO BAR FROTZ` and you will get a single line tooltip. It will work for non bootstrap tooltips (native) but not for bootstrap tooltips. – Andersson Mar 19 '21 at 03:02
2

I ran into this problem and resolved it by using a line break (<br/>) and enclosing the text in a <pre> tag. Make sure that the data-html attribute is set to true.

My setup is below. I was dynamically updating the title.

My div and the initial title:

<div id="example_div" data-toggle="tooltip" title="Loading..."  data-html="true">

A function I called on an onchange event:

function populateToolTips(outcomeData)
{
    let Txt = `<pre>Line 1 value: ${outcome.first}<br/>Line 2 value: ${outcome.second}</pre>`;

    $("#example_div").attr('title', Txt).tooltip('fixTitle');
}

The end result looks like this when hovering over the div:

Line 1 value: 123.45
Line 2 value: 678.90
Bad Programmer
  • 893
  • 1
  • 13
  • 27