Design: Create mockups for editing tooltips

[NilakshiS]

Overview

Admin users need the ability to edit the tooltip text in the calculator pages (1-4). So that they can update the information related to Strategies and Input fields that define a project (e.g., APN number).

Details

All the users on website have the ability to view tooltips on fields:

The "i" icon shows a Tooltip exists on a field


Clicking on the icon opens the Tooltip with related information


However Admin users need ability to modify the tooltips. We need to create mockups for the different actions admin user can take on tooltips:

• View existing tooltips
• Add a new tooltip if it does not exist
• Edit the tooltip

Suggested design ideas for the new actions:

• Add a new tooltip:

  • For fields that do not have a tooltip, the "i" icon can be replaced with a "+" icon instead.

  • Clicking on the "+" icon should open a modal to allow user to add text for the tool tip, similar to admin notes design.

    Design of the modal to add an admin note

    
  • After the tooltip text is saved, the field should have the "i" icon to indicate that a tooltip now exists

• Edit the tooltip

  • Since a tooltip already exists, the field will have an "i" icon.
  • On the bottom right of the expanded tooltip an edit icon button can be used to edit the text
  • Clicking the edit icon button, opens a modal to edit the tooltip text, similar to admin notes design.

Action Items

• [x] Create mockups for each user flow on Figma:
  • [x] View a tooltip
  • [x] Add a new tooltip
  • [x] Edit a tooltip
• [ ] Review with product and design. Update if needed based on feedback.
• [ ] Once finalized, add images to the staging deck on this slide
• [ ] get Stakeholder sign-off via the stakeholder meeting slide deck.

Resources/Instructions

• Link to TDM Calculator dev site
• Link to the style guide

[namigoeku]

Questions for team:

1. What will be editable in the tooltip edit modal?

   • Text, Hyperlink

   • Was told by Nilakshi that the edit will be a HTML textbox. Will design accordingly.

   • Since a tooltip can be created, can it also be deleted?

2. What is the maximum text length?

   • Maximum text should be as short as possible, with external link to guide user to more information.

3. Secondary issue 1: Tooltip and modal behavior: In-line with text, when should function as an overlay

4. Secondary issue 2: Tooltip vs. Popover verbiage should be distinct

   • A tooltip is used to give the user hints or help them to complete an action. They are also non-interactive.
   • A popover is used to give the user more detail about how to complete an action and can include links, is clickable, can support larger text area.
   • Created issue #1916 so we can differentiate a tooltip from a popover in the design system.

[namigoeku]

I took the suggestions and made a mockup flow with as few steps as possible.

Blockers:

• The proximity between the close button and edit button may cause the user to accidentally click something.
  

Plus icon indicates a tooltip may be added.

An edit modal opens, with note that indicates the textbox is HTML only.

Once the user closes the modal, they have a preview of the tooltip. To edit, they click the edit button on the bottom righthand corner.

The edit modal appears and behaves similarly to the first modal.

Clicking outside the modal will prompt a warning modal indicating the user will lose their changes.

[ExperimentsInHonesty]

Small change required, it will use the same editing functionality as the FAQ. It will not require HTMLS

[namigoeku]

@ExperimentsInHonesty Hi Bonnie, would you suggest I make the edit modal look similar to the edit FAQ page portion?

[jmeasow]

Bonnie said it should be exactly like the editing of the FAQs because it is using the same library.