CODEWITHSUNDEEP
djangotwitter-bootstrapdjango-formsdjango-crispy-forms
jhagege
jhagege

Reputation: 1586

Django-crispy-forms and tooltip

I use Django Crispy Forms and I'm trying to improve the UX in my forms by adding to it Bootstrap popovers or tooltips (dynamic bubbles that are toggled on hover that shows extra information about the form field).

Basically, I would have to add this specific piece of code next to a specific form label (title of the input field in the form)

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

So far this is what I tried and got it to show AFTER both the label and the input field. I would like to show in between both.

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

What would be the best way to go to do that? I cannot find an easy way to add some pure HTML, next to specific labels..

Thanks for your help.

Upvotes: 2

Views: 3665

Answers (1)

DRC
DRC

Reputation: 5048

you could override just the template of the title field, by defining your template, and put your customization there:

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

the template could be something like:

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

I've just copied things from the crispy_form source and added your html, but depending on your needs that could be simplified, it's up to you.

Upvotes: 4

Related Questions