Skip to content

Add tooltips to flatdrawing create/edit forms - #137

Merged
xmedr merged 2 commits into
masterfrom
feat/flat-drawing-helptext
Jul 28, 2026
Merged

Add tooltips to flatdrawing create/edit forms#137
xmedr merged 2 commits into
masterfrom
feat/flat-drawing-helptext

Conversation

@xmedr

@xmedr xmedr commented Jul 14, 2026

Copy link
Copy Markdown
Collaborator

Overview

This pr establishes a pattern for adding tooltips to document create/edit forms, starting with FlatDrawings. The forms are all handled by django-crispy-forms so we're adding tooltips and modals using JS after the form has been rendered.

Demo

image

Notes

My other thought was to have some kind of custom editable db solution, but it feels like this isn't something they're going to change very often so I went with this approach. I'm always open to suggestions if this isn't the case though!

Testing Instructions

  • Start this branch locally, log in, and head to either the create or edit page for a flatdrawing
  • Confirm that all tooltips appear for all relevant fields
  • Confirm that the modals work as expected and display relevant headers and bodies

@xmedr xmedr left a comment

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The pattern here is:

  • create a related static/js/tooltips/<modelname>.js script for the model
  • add an obj with the keys being each field's label as defined by crispyforms' generated field ids (i.e. div_id_*), and values being an html string with the help text
  • add tooltip button and modal html strings to the DOM for each label on the page
  • add the resulting script to the model's form template

"Cross ref map number": `
<p>Do not complete for new document additions. This field is a holdover from the paper indexing of historical projects used to indicate multiple locations. Note that the area and section values need to be null for any revisions to the indexing to be saved.</p>
`,
"Hash": undefined,

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The connected issue notes that CCFP isn't sure what the hash field is. I've kept it undefined for now and figure we can come back to add to it if/when we get some more info.

@xmedr
xmedr marked this pull request as ready for review July 14, 2026 16:17
@xmedr
xmedr requested a review from antidipyramid July 14, 2026 16:17

@antidipyramid antidipyramid left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Works great. Two small things:

  1. I think it'd be good to add some extra line breaks in the tooltips with large blocks of text.
Image
  1. For links, a formatted link would be nice e.g. Interactive map of Sections
Image

@xmedr

xmedr commented Jul 15, 2026

Copy link
Copy Markdown
Collaborator Author

Ah great point! I've got those changes in there now. Will merge after tests pass.

@xmedr
xmedr merged commit f999e8a into master Jul 28, 2026
2 checks passed
@xmedr
xmedr deleted the feat/flat-drawing-helptext branch July 28, 2026 18:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add tool tips to flat drawing page

2 participants