Как реализовать всплывающую подсказку в форме django

У меня есть типовая форма, основанная на этой модели:

class MyModel(TimeStampedModel):
    MY_CHOICES = [tuple([x,x]) for x in range(1,8)]
    p1 = models.IntegerField("P1”, default='1', help_text=‘text1’)
    p2 = models.IntegerField(“P2”, default=‘1’, , help_text=‘text2’)
    Parent = models.ForeignKey(ParentModel, on_delete=models.CASCADE)

Сама форма выглядит следующим образом:

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

        CHOICES = [tuple([x,x]) for x in range(1,8)]
        p1 = IntegerField( label='field_label1', widget=Select(choices=CHOICES))
        p2 = IntegerField( label='field_label2’, widget=Select(choices=CHOICES))

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

И это отображается в шаблоне в хрустящем виде:

{% crispy panss_form  %}

Я хочу, чтобы при наведении курсора на поля пользователь видел текст подсказки. Этот справочный текст может быть help_text из модели, или я буду рад поместить его куда-нибудь еще (хотя он должен быть либо в модели, либо в форме, не в шаблоне). Любая помощь будет оценена по достоинству.

По умолчанию html-подсказка доступна при определении атрибута title на Field. Доступ к справочным текстам и другим атрибутам полей можно получить из self.base_fields

Для вашего случая это будет:

self.helper.layout = Layout(
     Row(Field(
          PrependedText('p1', ‘field_label1’,wrapper_class='col-12 col-lg-6 pe-0 stretchprepend'),

          title=self.base_fields['p1'].help_text   # tooltip content
        ),
     )),

Если вы используете Bootstrap - более приятная всплывающая подсказка доступна по:

Field('field_name',
      title=self.base_fields['field_name'].help_text,
      data_bs_toggle='tooltip', 
      data_bs_placement='top')

А в шаблоне: 

<script>
  $('[data-bs-toggle="tooltip"]').tooltip()
</script>


Field('field_name',
      title=self.base_fields['field_name'].help_text,
      data_toggle='tooltip', 
      data_placement='top')

А в шаблоне: 

<script>
  $('[data-toggle="tooltip"]').tooltip()
</script>
Вернуться на верх