Hi all,
I created a ModelForm containing a Booleanfield. I like to show a tooltip if a user hovers over the checkbox. This works for TextInputs as well as TextInput.
class ContactForm(ModelForm):
"""
A form containing a message, sender, date and location field.
Plus an option to cc yourself.
"""
cc_myself = BooleanField(label=_("Copy me"), required=False,
help_text=_("Check if you want to receive a copy."))
class Meta:
model = Request
fields = ["sender", "date", "location", "message"]
localized_fields = ["message", "sender", "date", "location"]
widgets = {
"sender": TextInput(attrs={"class": "form-control w-auto",
"title": _("Please, enter your email address."), }),
"location": TextInput(attrs={"class": "form-control w-auto",
"title": _("Please, enter the city or address."), }),
"message": Textarea(attrs={"class": "form-control w-auto",
"title": _("Please, enter the message you want to send.")}),
"date": SelectDateWidget(attrs={"class": "form-select w-auto col-auto"}),
"cc_myself": CheckboxInput(attrs={"class": "form-check-input",
"title": _("Check if you want to receive a copy.")}),
}
This is the template:
<form name="ContactForm" id="ContactForm" action="" method="post">
{% csrf_token %}
{% for field in form %}
<div class="mb-3">
<div class="row">
<label class="label-class col-auto">{{ field.label }}</label>
{{ field }}
</div>
</div>
{% endfor %}
<input name="submit" id="submitBtn" type="submit" action="" class="btn btn-info"
value={% translate "Submit" %} disabled>
</form>
This is the resulting HTML. As far as I know there should be an attribute title.
..,
<div class="mb-3">
<label class="label-class col-auto">Kopie an mich</label>
<input type="checkbox" name="cc_myself" aria-describedby="id_cc_myself_helptext" id="id_cc_myself">
</div>
I hope I put all the relevant information into the post. Let me know if I missed something.