Forme e tooltip di Django-croccanti - django, twitter-bootstrap, forme django, forme django-croccanti

Uso Django Crispy Forms e ci sto provandomigliorare la UX nei miei moduli aggiungendo ad esso popover Bootstrap o suggerimenti (bolle dinamiche che vengono attivate al passaggio del mouse che mostrano informazioni extra sul campo del modulo).

Fondamentalmente, dovrei aggiungere questa specifica parte di codice accanto a un'etichetta del modulo specifica (titolo del campo di input nel modulo)

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

Finora questo è quello che ho provato e ho ottenuto di mostrare DOPO sia l'etichetta che il campo di input. Vorrei mostrare in mezzo a entrambi.

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

Quale sarebbe il modo migliore per farlo? Non riesco a trovare un modo semplice per aggiungere un po 'di HTML puro, accanto a etichette specifiche ..

Grazie per l'aiuto.

risposte:

puoi sovrascrivere solo il modello del campo del titolo, definendo il tuo modello e inserire la tua personalizzazione l

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

il modello potrebbe essere qualcosa del tipo:

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

Ho appena copiato le cose da la fonte crispy_form e aggiunto il tuo html, ma a seconda delle tue esigenze che potrebbero essere semplificate, sta a te.