CODEWITHSUNDEEP
djangodjango-crispy-forms
CutePoison
CutePoison

Reputation: 5355

Place (?) tooltip next to field-name Django

In my_model I have field1 and field2.

In my form I would like to have a (?) tool-tip next to the label of field2 such that I can display some tooltips for it when users hover over the (?). I have found something which works in a html-file but I don't really know how to load the labels from the html file to the label

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

Is there a better way to add this (?) tool-tip to a field(s)?

Upvotes: 1

Views: 2127

Answers (1)

Dr Phil
Dr Phil

Reputation: 807

You can put html tags in the help_text, and then use css to render a tooltip. For example,

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

And then use css like this w3s example:

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

Upvotes: 1

Related Questions