hackforla / hackforla/tdm-calculator

Content: Create hover tooltips for toolbar icons on the My Projects page

Open
#2,365 1 comment 0 reactions 0 assignees View on GitHub
deck: staging level: medium p-feature: My Projects Participant type: Admin Participant Type: Security Admin Participant type: User priority: SHOULD HAVE role: ui/ux design role: ux content writing size: 1pt
Dominant language
JavaScript
Stars
68
Forks
47
Avg merge
3d 9h
Merged PRs (30d)
25

Description

### Overview

We need to create hover tooltips for all the icons in the toolbar on the My Projects page, both for when the icons are active and when the icons are grayed out (disabled), so that users know their functions.

### Details
Some icons in the toolbar display tooltips on hover, while others do not. Create hover tooltips for all icons.

Examples

Image

Image

Image

Image

### Style
Please design tooltips that conform to these standards

- Tooltips consistency #1916
- [Figma:Tooltips](https://www.figma.com/design/nD9QK56Mzq7xNSaSUoeGx0/TDM-Calculator?node-id=18052-10567&t=wix4ynfllZq7Ebo2-4)

### Action Items
- [ ] Move this issue from the Prioritized Backlog column to the In Progress column.
- [ ] In Figma, move a blank page to the Design section.
- [ ] Change the Figma page's title to be "#Issue Number | Title | Assignee Name".
- [ ] Copy contents from the Template page to the Figma page.
- [ ] Add a link to the Figma page to the Figma section of this GitHub issue below.
- [ ] Use the Figma page to design potential solutions for this issue. See [this Figma file](https://www.figma.com/design/nD9QK56Mzq7xNSaSUoeGx0/TDM-Calculator?node-id=18949-13025&t=2Y3NNBTYH8rtOKU0-1) for a mockup that is already in progress.
- [ ] Review proposed designs with the design lead. Implement feedback as necessary.
- [ ] Review proposed designs with the design director. Implement feedback as necessary.
- [ ] Review proposed designs with the product, development, and research teams. Implement feedback as necessary.
- [ ] Receive design approval from stakeholders. Implement feedback as necessary.
- [ ] Create a Ready for Dev section around the final designs on the Figma page.
- [ ] Update the Figma Design System with changes resulting from the issue's final design, if applicable.
- [ ] Update the [Style Guide Presentation](https://docs.google.com/presentation/d/1I4q35NL2WW2RpksIyawhHCd8qJnrjme1ZDNIBxu24hQ/), if applicable.
- [ ] Create a development handoff issue.
- [ ] Move this issue's Figma page to the Development section.
- [ ] Add the development issue's number in parentheses at the beginning of the title of the Figma page.
- [ ] Include the development issue number in the GitHub section below.
- [ ] Reassign any previous assignees to this issue.
- [ ] Close this issue.

### Resources/Instructions

#### Figma
- [Figma Design My Project Page](https://www.figma.com/design/nD9QK56Mzq7xNSaSUoeGx0/TDM-Calculator?node-id=19038-7187&t=vqlB4ckIFjqvfdA3-1)
- [Figma Design Tooltips and Popover
](https://www.figma.com/design/nD9QK56Mzq7xNSaSUoeGx0/TDM-Calculator?node-id=17182-67401&t=vqlB4ckIFjqvfdA3-1)

#### Github
- #1916

#### Slides
- [Staging Deck](https://docs.google.com/presentation/d/1crZ3IxqA4hAu3qzD7ns93Ieuqjwh6wyEtuX_46cP-fg)
- [Staging Deck, slide 2365](https://docs.google.com/presentation/d/1crZ3IxqA4hAu3qzD7ns93Ieuqjwh6wyEtuX_46cP-fg/edit#slide=id.g34049d6f588_0_6)
- Release Deck
- [YYYY-MM-DD Release Deck, slide 2365]

Contributor guide

Open the contributing guide

Research direction

Start with the linked Figma My Project Page and the Figma Design Tooltips and Popover resource, then review issue #1916 for tooltip consistency. Done means approved tooltip designs cover every My Projects toolbar icon in both active and disabled states, with a Ready for Dev section and a development handoff issue created.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
design, frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.