Django crispy表单和工具提示

我使用Django Crispy表单，并试图通过在表单中添加引导弹出窗口或工具提示（在悬停状态下切换的动态气泡，显示表单字段的额外信息）来改进表单中的用户体验

基本上，我必须在特定的表单标签（表单中输入字段的标题）旁边添加这段特定的代码

到目前为止，这是我尝试过的，并在标签和输入字段之后显示出来。 我想介于两者之间

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

self.helper.layout=布局(
“头衔”，
“说明”，
字段（'category'，css_class='form-control select primary select block mbl'），
Html（“”））

最好的方法是什么？ 我找不到一种简单的方法在特定标签旁边添加一些纯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 %}>

{%load crispy_forms_field%}
你已经读过关于布局操纵的书了吗？是的，我读过，但是我没有成功地让它工作。通过布局操作，我得到了在标签和输入字段之后显示的工具提示。我想在两者之间展示。你能展示一下你在布局方面做了哪些尝试吗？非常感谢你的帮助！如果我想用我所有的田地做这件事，最好的干法是什么？我想我可以“注入”所有字段的数据内容？更直接的方法是定义一个基本模板，在字段中指定扩展该基本模板并修改内容字符串的模板。另一种方法是在这些模板上添加额外的上下文，并在字段定义中指定，但我对该选项没有正确的答案，作为“借口”，也许最好将字符串和模板留在它们所属的位置（而不是在表单定义中）@cyberjoac不管怎样，更正我最后的评论，您可以尝试传递到字段，一个额外的上下文：
字段（'..'，template=“…”，额外的上下文={'custom\u string'：{（“data string，…）}）
并在模板中尝试使用
{{{custom\u string}}
{% 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 %}>