Search code examples
htmldjangodjango-templatesinternationalizationdjango-i18n

Django tooltip translation not working with white spaces

I am translating an html tooltip using i18n which does not show when it is between translation tags {% translate ... %} unless spaces are removed.

Code without translate tag:

<th scope="col">{% trans '% Name' %} <span class="tt" data-bs-placement="bottom" title= 'Some normal text (NT) with spaces.'><i class="bi bi-question-circle-fill hover-only" style="font-size: 1.2rem;"></i></span></th>

No translate tag

The code with translation tag shows only the first word before the white space.

<th scope="col">{% trans '% Name' %} <span class="tt" data-bs-placement="bottom" title= {% translate 'Some normal text (NT) with spaces.' %}><i class="bi bi-question-circle-fill hover-only" style="font-size: 1.2rem;"></i></span></th>

Translation tag with white space

When the white spaces are removed with _, the whole text shows even if between the {% translate .. %} tag.

<th scope="col">{% trans '% Name' %} <span class="tt" data-bs-placement="bottom" title= {% translate 'Some_normal_text_(NT)_with_spaces.' %}><i class="bi bi-question-circle-fill hover-only" style="font-size: 1.2rem;"></i></span></th>

Whole text with no white space

Anyone knows how to show the whole text with white spaces?

Solution

  • The single quotes in the translate tag demarcate the string, but aren't part of it. So when it's translated, you have no attribute quotes for title.

    title= {% translate 'Some normal text (NT) with spaces.' %}

    Should be

    title= "{% translate 'Some normal text (NT) with spaces.' %}"

    Or

    title= {% translate '"Some normal text (NT) with spaces."' %}

    Otherwise the browser is assuming the first word is the string, because there are no quotes to encompass the rest of the string.