在字段名 Django 旁边放置 (?) 工具提示答案

【问题标题】：Place (?) tooltip next to field-name Django在字段名 Django 旁边放置 (?) 工具提示
【发布时间】：2021-03-11 14:36:59
【问题描述】：

在my_model 我有field1 和field2。

在我的表单中，我希望在 field2 标签旁边有一个 (?) 工具提示，这样当用户将鼠标悬停在 (?) 上时，我可以为其显示一些工具提示。我找到了可以在 html 文件中使用的东西，但我真的不知道如何将标签从 html 文件加载到标签

class MyModelForm(forms.ModelForm):
    class Meta:
       model = my_model
       fields = ["field1","field2"]
       labels = {"field2":load_html("my_hmtl_file.html")

有没有更好的方法将此 (?) 工具提示添加到字段中？

【问题讨论】：

我建议看看 help_text 属性：docs.djangoproject.com/en/3.1/ref/forms/fields/#help-text
是的，我也想过这个问题，我只是觉得 tooptip 有点……干净
如果你使用像 bootstrap 这样的 css 框架，看看 django-widget-tweaks

标签： django django-crispy-forms

【解决方案1】：

你可以把html标签放在help_text中，然后用css渲染一个tooltip。例如，

    fieldName = forms.CharField(help_text="<span class=\"tooltip\">?<span class=\"tooltiptext\">tool_tip_text_to_be_displayed</span></span>")

然后像这样使用 css w3s 示例：

<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; 
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
 
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>

【讨论】：