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

• Create mockups for each user flow on Figma:
  • View a tooltip
  • Add a new tooltip
  • Edit a tooltip
• Review with product and design. Update if needed based on feedback.
• Once finalized, 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 Design System: Differentiating Tooltips from Popovers #1916 so we can differentiate a tooltip from a popover in the design system.