CODEWITHSUNDEEP
django
kabanus
kabanus

Reputation: 25895

Change behaviour of help text in django form globally

I want to take advantage of the default help text in django, but I don't like the way it's handled. I want to have:

<tr><label>djangolab</label><input>djangoinput</input><span>djangohelp></span><span class='onhovershowhelp'>?</span>

The last element is not provided by default. CSS on hover on '?' will change visibility for the help text span from hidden to visible.

I want things to work out of the box so '{{form}}' will display as I want for any model form. So I want globally:

  1. Help text span by default with some attributes(z=1, hidden)
  2. Add another span to form row.

I don't want to do this for every model form/field etc, use loops in the template and manually build this etc...

Upvotes: 4

Views: 1965

Answers (1)

kabanus
kabanus

Reputation: 25895

Got it. Have all forms inherit something like this (that _html_output call is the hidden implementation detail taken directly from django's source code):

import django.forms

class GenericForm(django.forms.ModelForm):
    def as_table(self):
        return self._html_output(
            normal_row='<tr%(html_class_attr)s><th>%(label)s</th><td>%(errors)s%(field)s%(help_text)s</td></tr>',
            error_row='<tr><td colspan="2">%s</td></tr>',
            row_ender='</td></tr>',
            help_text_html='<a class="helptext">?<span>%s</span></a>',
            errors_on_separate_row=False)
        return html

And some CSS to accompany this:

.helptext {
    margin: 5px;
    color: blue;
}

a.helptext span {
    display:none;
    width: 30em;
    text-align: justify;
    z-index:1;
}

a.helptext:hover span {
    display:inline;
    position:absolute;
    background:#ffffff;
    border:1px solid #cccccc;
    color:#6c6c6c;
}

Upvotes: 4

Related Questions