"Why can't i edit this content" contextual help text for centralized content

[swirtSJW]

As an editor of local Policies content, i have contextual help explaining the purpose of national content, and why i can't edit it, on the form page and the view page

ACs

• [x] "Why can't i edit this" content is visible to editors via a tooltip on the proofing screen and edit screen
• [x] Grey background for centralized content (assuming one color is ok, needs checking on design intent with @rachel-kauff)
• [x] ~Developer info (paragraph id etc) is hidden on proofing page (eg Source:node 15588 paragraph 7192f5fb-08dd-4401-a863-c5a09cc7de50)~ moved to #4077
• [x] Content type description "Add policies specific to this VA medical center to appear on the Policies page. Local policies will appear alongside national policies that apply to all VAMCs."
• [x] Content type guidelines "<h2>Policies VAMC top task page*</h2><p>Add policies specific to this VA medical center to appear on the Policies page. Local policies will appear alongside national policies that apply to all VAMCs.</p>
• [x] ~All field labels on VAMC Policies Top Task are hidden on proofing page.~ moved to #4077
• [ ] "Policies" should look like an h1.
• [x] Follow USWDS as much as possible
• [x] Tooltips should have speech bubble arrows
• [x] description should get moved to the top, via twig template

Implementation

• [x] Create a fieldset fieldgroup with a description on edit mode and view mode
• [x] Theme description to use the tooltip
• [x] Tooltip implementation approach for fieldgroup, with a class
• [x] Consider including "Why can't i edit this?" to the tooltip itself (needs design review)
• [x] hide all field labels on VAMC Policies Top Task proofing page

[kaise-lafrai]

@kevwalsh @rachel-kauff Question: Do we want the tooltip to display the help text on hover or when either the icon or the "Why Can't I Edit This?" is clicked? USWDS tooltip component uses hover and that's what I have "working" right now.

[kaise-lafrai]

@rachel-kauff Is the "Why Can't I Edit This?" text required? Should we just display the icon and put the "Why Can't I Edit This?" text within the help text on hover?

[rachel-kauff]

@kaise-lafrai cc: @kevwalsh Your question prompted me to reconsider whether we needed the 'Why can't I edit this' label,' so I experimented with removing it. I think we don't need it after all. I revised the OG wireframe, and included a screenshot below.

WRT the behavior of the icon: I think it should display on mouse and keyboard hover.

[kaise-lafrai]

@kevwalsh I am having some difficulty getting things to look right with the "policy" fieldset title. Placing an <h2> tag around the{{ legend.title }} causes some bad overlapping to occur with content below it.

Do we want all fieldset titles to be an h2 everywhere or only the Policy title?

[kevwalsh]

@kaise-lafrai it's just the Policies string.

last week when we talked about this, we also discussed the option of moving the string into a markup field in the content type, displayed as the first field int that fieldset, on the form.

[kaise-lafrai]

Let me try that. Thanks

[kaise-lafrai]

@kevwalsh @rachel-kauff Hello - This is ready for design review here: https://pr4124-lzaiknstma0lmzpmyw4qkjeuptguskhi.ci.cms.va.gov/node/add/vamc_system_policies_page

I still have a little more code cleanup to do before sending it over for code review.

[kaise-lafrai]

@kevwalsh H1 is not an allowable option for the markup wysiwyg!

[rachel-kauff]

Looking at USWDS guidance on tooltips and am wondering if what we have currently is violating this guidance:

Don’t block content. Use the data-position attribute to prevent the tooltip from covering other page elements.

I recommend having the balloon display on the right side (currently it's on the left, and covers the content).

[rachel-kauff]

Like this:

[swirtSJW]

@rachel-kauff That is an interesting detail, but I don't think we can completely win with that guideline. If we move it to the right, it will still block stuff in the right rail.

I'm going to move this forward with what we have and we can iterate if it is important.