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

Я використовую Django Crispy Forms і намагаюсявдосконалити UX у моїх формах, додавши до нього поповерти Bootstrap або підказки (динамічні бульбашки, які перемикаються при наведенні, що відображає додаткову інформацію про поле форми).

В основному, мені довелося б додати цей конкретний фрагмент коду поруч із певною міткою форми (заголовок поля введення у формі)

<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>

Поки що це те, що я спробував і показав ПІСЛЯ як мітку, так і поле введення. Я хотів би показати між ними.

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>"))

Який найкращий спосіб зробити це? Я не можу знайти простий спосіб додати чистий HTML поруч із певними мітками.

Спасибі за вашу допомогу.

Відповіді:

Ви можете замінити лише шаблон поля заголовка, визначивши свій шаблон, і помістити туди свої налаштування:

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

шаблон може бути приблизно таким:

{% 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 %}>

Я просто копіював речі з джерело crispy_form і додав ваш html, але залежно від ваших потреб, які можна спростити, це залежить від вас.