CODEWITHSUNDEEP
python-3.xflaskflask-wtforms
Aisha Sid
Aisha Sid

Reputation: 13

Add help icon to items in wtforms

I have a flask application which has a form to accept a file and some text fields inputs, from the user. This form is created using wtforms classes.

Along with each field, I want to provide a '?' help icon, hovering upon which or clicking on which, gives details of the type of input this field requires, etc.

I am using the description field for a one-line description. But also will be requiring the '?' help icon too.

I have googled about this and only found out how to hover over the field and get the description using 'data-toggle' but I'd like to add a '?' icon to every form element and describing the input that is required. Is this even possible with wtforms, if yes could you please guide me to it?

Upvotes: 1

Views: 582

Answers (1)

T4roy
T4roy

Reputation: 196

Create an icon, or download one, and save it into a folder like static/images then use the url_for() method within a <img> tag. Here is what I used, mine has a link to a help page;

<a href="{{ url_for('main.help') }}" data-toggle="tooltip" data-placement="left" title="{{ form.field.description }}"><img src="{{ url_for('static', filename='images/Help48x48.png') }}" width="20" height="20" class="d-inline-block align-top" alt="[i]"></a>

Upvotes: 1

Related Questions