Boolean Field / CheckboxInput Tooltip not showing

Using Django Forms & APIs
1

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.

2

Welcome @Segelzwerg !

This field is not a field in the model.

The widget dict only applies to the fields being automatically generated by the ModelForm, it doesn’t apply to fields defined in the form itself.

You would need to use the widget attribute within the BooleanField definition for this to work.

1 Like
3

Dear Ken,
great explanation.
I ended up with this. I believe this is what Ken mentioned earlier.

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,
                             widget=CheckboxInput(attrs={
                                 "class": "form-check-input",
                                 "title": _("Check if you want to receive a copy.")}))