Display NC names on hover via pop-up modal

[cottonchristopher]

Overview

We need to display NC names on-hover over unselected NC, so that users can have the necessary information to increase functionality and ease of use ( knowing NC names)

Action Items

1. on-hover (over un-selected NC), display pop-up modal with NC name

• Address the problem overview with possible design solution(s) in a comment
• Complete Design Iterations section below
• Document user interaction in Figma

Resources

v1.2 Moderated Usability Study

• October '23 slide indicating need for on-hover display
• August '24 slide indicating user clicked on boundary line to see NC name

---

Design Iterations

Please move ticket between In Progress and In Review to assist PM team

Iteration 1

Link to notes: REPLACE WITH COMMENT URL

REPLACE WITH SCREENSHOT UPLOAD

---

Hand Off Materials

Figma Section Name: REPLACE WITH SECTION NAME

Before Screenshot

<>

After Screenshot (Finalized)

REPLACE WITH SCREENSHOT UPLOAD

Designer Resources

Iteration Dropdown Copy/Paste

<details><summary>Iteration X</summary>
<p>

Link to notes: `REPLACE WITH COMMENT URL`

`REPLACE WITH SCREENSHOT UPLOAD`

</p>
</details> 

Instructions for Engineering Hand Off

To Start Engineering Hand Off...

1. Ensure all Hand Off Materials are filled in
2. Add the "ready for dev lead" label
3. Leave a comment saying "This ticket is ready for engineering hand off."

[cottonchristopher]

Merging this ticket with: #1808

[cottonchristopher]

Ready for Design Lead, please add the appropriate size level label based on review

[ryanfchase]

Added some links to usability test presentations, referencing users that are asking for this (or similar) feature

[Joy-Truex]

Inspiration Research: Weather.com, LA city, California

Screenshot


Iteration 1:

NC Label

Hover Popup

[ryanfchase]

@Joy-Truex Thanks for your work on this. Should we include your screenshots as "Iteration 1" in the original post?

Also, a tip on pasting images in dropdowns, the ![Image](...) line needs to have an empty line above and below it. For some reason the image doesn't know it should render unless it's got some buffer lines.

Example:

<details><summary>Details</summary>
<p>

![Image](...) <-- an empty line above and below

</p>
</details> 

[Joy-Truex]

@ryanfchase Do you know if this ticket is in development? This will impact my work on the hover popup. Thanks!

[ryanfchase]

@ryanfchase Do you know if this ticket is in development? This will impact my work on the hover popup. Thanks!

The link goes to a figma section for #1699, is that the ticket you refer to?

If so, the work is completed and the ticket is closed:

• Clear District Council search box field on deselect #1699