Django-crispy-form i tooltip - django, twitter-bootstrap, django-forms, django-crispy-forms

Używam Django Crispy Forms i próbujępoprawić UX w moich formularzach, dodając do niego wyskakujące okienka Bootstrap lub podpowiedzi (dynamiczne bąbelki przełączane po najechaniu kursorem, które pokazują dodatkowe informacje o polu formularza).

Zasadniczo musiałbym dodać ten konkretny fragment kodu obok określonej etykiety formularza (tytuł pola wejściowego w formularzu)

<a tabindex="0" role="button" data-toggle="popover"
data-html="true" data-trigger="hover" data-placement="auto"
title="Extra information"
data-content="Here is the extra information I want to show when user hovers over the information glyphicon">
<span class="glyphicon glyphicon-info-sign"></span>
</a>

Jak dotąd próbowałem tego i pokazałem PO zarówno etykiecie, jak i polu wejściowym. Chciałbym pokazać pomiędzy nimi.

self.helper.layout = Layout(
"title",
"description",
Field("category", css_class="form-control select select-primary select-block mbl"),
Html("<a tabindex="0" role="button" data-toggle="popover" data-html="true" data-trigger="hover" data-placement="auto" title="Extra information" data-content="Here is the extra information I want to show when user hovers over the information glyphicon"><span class="glyphicon glyphicon-info-sign"></span></a>"))

Jaki byłby najlepszy sposób, aby to zrobić? Nie mogę znaleźć prostego sposobu na dodanie czystego kodu HTML obok określonych etykiet.

Dzięki za pomoc.

Odpowiedzi:

możesz nadpisać tylko szablon pola tytułu, definiując szablon i umieścić tam swoje dostosowanie:

self.helper.layout = Layout(
Field("title", template="./path/to/template/popover.html"),
....

szablon może wyglądać następująco:

{% load crispy_forms_field %}
<{% if tag %}{{ tag }}{% else %}div{% endif %} id="div_{{ field.auto_id }}" {% if not field|is_checkbox %}class="form-group{% else %}class="checkbox{% endif %}{% if wrapper_class %} {{ wrapper_class }}{% endif %}{% if form_show_errors%}{% if field.errors %} has-error{% endif %}{% endif %}{% if field.css_classes %} {{ field.css_classes }}{% endif %}">
{% if field.label and not field|is_checkbox and form_show_labels %}
<label for="{{ field.id_for_label }}" class="control-label {{ label_class }}{% if field.field.required %} requiredField{% endif %}">
{{ field.label|safe }}{% if field.field.required %}<span class="asteriskField">*</span>{% endif %}
</label>
{% endif %}

<a tabindex="0" role="button" data-toggle="popover"
data-html="true" data-trigger="hover" data-placement="auto"
title="Extra information"
data-content="Here is the extra information I want to show when user hovers over the information glyphicon">
<span class="glyphicon glyphicon-info-sign"></span>
</a>

<div class="controls {{ field_class }}">
{% crispy_field field %}
{% include "bootstrap3/layout/help_text_and_errors.html" %}
</div>
</{% if tag %}{{ tag }}{% else %}div{% endif %}>

Właśnie skopiowałem rzeczy z źródło crispy_form i dodał swój kod HTML, ale w zależności od potrzeb, które można uprościć, decyzja należy do Ciebie.