Question

我使用Django Crispy Forms，我试图通过添加Bootstrap popovers或工具提示（在悬停时切换的动态气泡，显示有关表单字段的额外信息）来改进表单中的UX。

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

<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，在特定标签旁边..

感谢您的帮助。

Answer 1

您可以通过定义模板来覆盖标题字段的模板，并将自定义放在那里：

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

我刚从the crispy_form source复制了内容并添加了您的HTML，但根据您的需求可以简化，这取决于您。

Django-crispy-forms和工具提示

1 个答案: