如何为Django ModelForm实现字段悬停提示（Tooltip）

方法一：利用模型help_text，通过自定义Widget添加原生悬停提示 #

我们可以自定义继承自Select的Widget，自动读取模型字段的help_text，添加到HTML元素的title属性，实现鼠标悬停时显示提示。

1. 自定义Widget类：

from django.forms import Select

class HoverHelpSelect(Select):
    def __init__(self, help_text=None, *args, **kwargs):
        self.help_text = help_text
        super().__init__(*args, **kwargs)

    def create_option(self, name, value, label, selected, index, subindex=None, attrs=None):
        option = super().create_option(name, value, label, selected, index, subindex, attrs)
        if self.help_text:
            option['attrs']['title'] = self.help_text
        return option

2. 修改表单代码：
   删除原表单中重新定义p1/p2字段的冗余代码，直接给现有字段绑定自定义Widget：

class MyModelForm(ModelForm):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)

        self.helper = FormHelper(self)
        self.helper.form_id = 'id-CaseForm'
        self.helper.form_class = 'blueForms'
        self.helper.form_method = 'post'
        self.helper.form_tag = False
        self.helper.help_text_inline = False
        self.helper.form_show_labels = False
        self.helper.layout = Layout(
            Row(Field(PrependedText('p1', 'field_label1', wrapper_class='col-12 col-lg-6 pe-0 stretchprepend'))),
            Row(Field(PrependedText('p2', 'field_label2', wrapper_class='col-12 col-lg-6 pe-0 stretchprepend')))
        )

        # 绑定自定义Widget并传入模型的help_text
        self.fields['p1'].widget = HoverHelpSelect(
            help_text=self.fields['p1'].help_text, 
            choices=self.fields['p1'].choices
        )
        self.fields['p2'].widget = HoverHelpSelect(
            help_text=self.fields['p2'].help_text, 
            choices=self.fields['p2'].choices
        )

    class Meta:
        model = MyModel
        fields = ['p1', 'p2',]

方法二：直接给Widget添加title属性（无需自定义类） #

如果不想新增Widget类，可直接在表单初始化时给字段的Widget添加title属性：

class MyModelForm(ModelForm):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)

        self.helper = FormHelper(self)
        # 保留原helper配置
        self.helper.form_id = 'id-CaseForm'
        self.helper.form_class = 'blueForms'
        self.helper.form_method = 'post'
        self.helper.form_tag = False
        self.helper.help_text_inline = False
        self.helper.form_show_labels = False
        self.helper.layout = Layout(
            Row(Field(PrependedText('p1', 'field_label1', wrapper_class='col-12 col-lg-6 pe-0 stretchprepend'))),
            Row(Field(PrependedText('p2', 'field_label2', wrapper_class='col-12 col-lg-6 pe-0 stretchprepend')))
        )

        # 直接给Widget添加title属性，可选用模型help_text或自定义文本
        self.fields['p1'].widget.attrs['title'] = self.fields['p1'].help_text
        self.fields['p2'].widget.attrs['title'] = self.fields['p2'].help_text
        # 若需自定义提示文本，替换为字符串即可：
        # self.fields['p1'].widget.attrs['title'] = '自定义p1悬停提示'

    class Meta:
        model = MyModel
        fields = ['p1', 'p2',]

注意事项 #

• 原表单中重新定义p1 = IntegerField(...)属于冗余操作，会覆盖模型生成的字段配置，建议删除。
• 上述方案均使用浏览器原生的title属性实现悬停提示，无需额外CSS/JS；若需要更美观的自定义样式，可在blueForms对应的CSS文件中添加:hover伪类样式，无需修改模板。

内容的提问来源于stack exchange，提问作者RobMcC