**Acceptance criteria**

* Create a component to trigger the dialog for an attribute help text

* The dialog is primerized

* The trigger is a question mark (?) icon

* Clicking on the question mark icon should open a popover that displays the full help text.

* The (?) icon should be rendered with Primer colours.

* Hook into the Primer form builder to automatically show the question mark as part of the label when an element of the form has an attribute help text configured.


<br> Begin of the insertion

## Overview of attribute help text Primerization work

<br>

**N.B. the work is not necessarily linear** \- as such the colours applied to empty cells are for rough guidance only.

<figure class="table op-uc-figure_align-center op-uc-figure"><table class="op-uc-table"><thead class="op-uc-table--head"><tr class="op-uc-table--row"><th class="op-uc-table--cell op-uc-table--cell_head"><p class="op-uc-p"><br data-cke-filler="true"></p></th><th class="op-uc-table--cell op-uc-table--cell_head"><p class="op-uc-p"><br data-cke-filler="true"></p></th><th class="op-uc-table--cell op-uc-table--cell_head"><p class="op-uc-p"><br data-cke-filler="true"></p></th><th class="op-uc-table--cell op-uc-table--cell_head" colspan="3"><p class="op-uc-p">Project forms</p></th><th class="op-uc-table--cell op-uc-table--cell_head" colspan="3"><p class="op-uc-p">Project Overview pages</p></th><th class="op-uc-table--cell op-uc-table--cell_head" colspan="3"><p class="op-uc-p">Other</p></th></tr><tr class="op-uc-table--row"><th class="op-uc-table--cell op-uc-table--cell_head"><p class="op-uc-p"><strong>Work Package</strong></p></th><th class="op-uc-table--cell op-uc-table--cell_head"><p class="op-uc-p"><strong>Target version</strong></p></th><th class="op-uc-table--cell op-uc-table--cell_head"><p class="op-uc-p"><strong>Status</strong></p></th><th class="op-uc-table--cell op-uc-table--cell_head"><p class="op-uc-p">Project Settings &gt; Information</p></th><th class="op-uc-table--cell op-uc-table--cell_head"><p class="op-uc-p">Project Create</p></th><th class="op-uc-table--cell op-uc-table--cell_head"><p class="op-uc-p">Project Copy</p></th><th class="op-uc-table--cell op-uc-table--cell_head"><p class="op-uc-p">Project Overview (Sidebar - Project Attributes)</p></th><th class="op-uc-table--cell op-uc-table--cell_head"><p class="op-uc-p">Project Overview (Widget Headers)</p></th><th class="op-uc-table--cell op-uc-table--cell_head"><p class="op-uc-p">Project Overview &gt; Project Attributes Dialog</p></th><th class="op-uc-table--cell op-uc-table--cell_head"><p class="op-uc-p">Admin &gt; Attribute Help Texts</p></th><th class="op-uc-table--cell op-uc-table--cell_head"><p class="op-uc-p">Work Packages</p></th><th class="op-uc-table--cell op-uc-table--cell_head"><p class="op-uc-p">Member Form (Filters)</p></th></tr></thead><tbody><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p">not implemented</p></td><td class="op-uc-table--cell" style="background-color:hsl(30, 75%, 60%);" colspan="4"><p class="op-uc-p">existing ng implementation</p></td><td class="op-uc-table--cell"><p class="op-uc-p">not implemented</p></td><td class="op-uc-table--cell" style="background-color:hsl(30, 75%, 60%);" colspan="3"><p class="op-uc-p">existing ng implementation</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><mention class="mention" data-id="63738" data-type="work_package" data-text="#63738">#63738</mention>&nbsp;</p><p class="op-uc-p"><mention class="mention" data-id="63737" data-type="work_package" data-text="#63737">#63737</mention>&nbsp;</p></td><td class="op-uc-table--cell"><p class="op-uc-p"><strong>16.1</strong></p></td><td class="op-uc-table--cell"><p class="op-uc-p">workPackageValue:63737:status</p></td><td class="op-uc-table--cell" style="background-color:hsl(210, 75%, 60%);"><p class="op-uc-p">initial Primer implementation&nbsp;</p></td><td class="op-uc-table--cell" style="background-color:hsl(30, 75%, 60%);" colspan="4"><p class="op-uc-p">ng implementation + update to use same icon as Primer implementation.</p></td><td class="op-uc-table--cell"><p class="op-uc-p">not implemented</p></td><td class="op-uc-table--cell" style="background-color:hsl(30, 75%, 60%);" colspan="3"><p class="op-uc-p">ng implementation + update to use same icon as Primer implementation.</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><mention class="mention" data-id="64531" data-type="work_package" data-text="#64531">#64531</mention>&nbsp;</p></td><td class="op-uc-table--cell"><p class="op-uc-p"><strong>16.1</strong></p></td><td class="op-uc-table--cell"><p class="op-uc-p">workPackageValue:64531:status</p></td><td class="op-uc-table--cell" style="background-color:hsl(210, 75%, 60%);"><p class="op-uc-p">Updates Primer implementation to match ng implementation colours.</p><p class="op-uc-p">Updates tooltip positioning</p><p class="op-uc-p">Updates tooltip text</p></td><td class="op-uc-table--cell" style="background-color:hsl(30, 75%, 60%);" colspan="4"><p class="op-uc-p">ng implementation + update to use same tooltip text as Primer implementation.</p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl(30, 75%, 60%);" colspan="3"><p class="op-uc-p">ng implementation + update to use same tooltip text as Primer implementation.</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><mention class="mention" data-id="64470" data-type="work_package" data-text="#64470">#64470</mention>&nbsp;</p></td><td class="op-uc-table--cell"><p class="op-uc-p"><strong>16.1</strong></p></td><td class="op-uc-table--cell"><p class="op-uc-p">workPackageValue:64470:status</p></td><td class="op-uc-table--cell" style="background-color:hsl(210, 75%, 60%);"><p class="op-uc-p">Fixes missing help text for Subproject of field</p></td><td class="op-uc-table--cell" style="background-color:hsl(30, 75%, 60%);"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl(30, 75%, 60%);"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl(30, 75%, 60%);"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl(30, 75%, 60%);"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl(30, 75%, 60%);"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl(30, 75%, 60%);"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl(30, 75%, 60%);"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><mention class="mention" data-id="64471" data-type="work_package" data-text="#64471">#64471</mention>&nbsp;</p></td><td class="op-uc-table--cell"><p class="op-uc-p"><strong>16.1</strong></p></td><td class="op-uc-table--cell"><p class="op-uc-p">workPackageValue:64471:status</p></td><td class="op-uc-table--cell" style="background-color:hsl(210, 75%, 60%);"><p class="op-uc-p">Fixes missing help text for Project Status button</p></td><td class="op-uc-table--cell" style="background-color:hsl(30, 75%, 60%);"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl(30, 75%, 60%);"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl(30, 75%, 60%);"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl(30, 75%, 60%);"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl(30, 75%, 60%);"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl(30, 75%, 60%);"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl(30, 75%, 60%);"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><mention class="mention" data-id="64583" data-type="work_package" data-text="#64583">#64583</mention>&nbsp;</p></td><td class="op-uc-table--cell"><p class="op-uc-p"><strong>16.1</strong></p></td><td class="op-uc-table--cell"><p class="op-uc-p">workPackageValue:64583:status</p></td><td class="op-uc-table--cell" style="background-color:hsl(210, 75%, 60%);"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl(30, 75%, 60%);"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl(30, 75%, 60%);"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl(30, 75%, 60%);"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl(30, 75%, 60%);"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl(210, 75%, 60%);"><p class="op-uc-p">Introduces Primer implementation</p></td><td class="op-uc-table--cell" style="background-color:hsl(30, 75%, 60%);"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl(30, 75%, 60%);"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl(30, 75%, 60%);"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><mention class="mention" data-id="64475" data-type="work_package" data-text="#64475">#64475</mention>&nbsp;</p></td><td class="op-uc-table--cell"><p class="op-uc-p"><strong>16.1</strong></p></td><td class="op-uc-table--cell"><p class="op-uc-p">workPackageValue:64475:status</p></td><td class="op-uc-table--cell" style="background-color:hsl(210, 75%, 60%);"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl(30, 75%, 60%);"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl(30, 75%, 60%);"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl(210, 75%, 60%);"><p class="op-uc-p">introduces Primer implementation</p></td><td class="op-uc-table--cell" style="background-color:hsl(30, 75%, 60%);"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl(210, 75%, 60%);"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl(210, 75%, 60%);"><p class="op-uc-p">introduces Primer implementation</p></td><td class="op-uc-table--cell" style="background-color:hsl(30, 75%, 60%);"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl(210, 75%, 60%);"><p class="op-uc-p">introduces Primer implementation</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><mention class="mention" data-id="64550" data-type="work_package" data-text="#64550">#64550</mention>&nbsp;</p></td><td class="op-uc-table--cell"><p class="op-uc-p"><strong>16.2</strong></p></td><td class="op-uc-table--cell"><p class="op-uc-p">workPackageValue:64550:status</p></td><td class="op-uc-table--cell" style="background-color:hsl(313, 53%, 33%);" colspan="9"><p class="op-uc-p">Replaces all remaining instances of the existing ng implementation with a new ng implementation that interops with Primer - updating tooltip styling, rendering the Primer attribute help text dialog.</p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><mention class="mention" data-id="63593" data-type="work_package" data-text="#63593">#63593</mention>&nbsp;</p></td><td class="op-uc-table--cell"><p class="op-uc-p"><strong>16.2</strong></p></td><td class="op-uc-table--cell"><p class="op-uc-p">workPackageValue:63593:status</p></td><td class="op-uc-table--cell" style="background-color:hsl(210, 75%, 60%);"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl(210, 75%, 60%);"><p class="op-uc-p">Introduces Primer implementation**</p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl(210, 75%, 60%);"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl(270, 75%, 60%);"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl(210, 75%, 60%);"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl(210, 75%, 60%);"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl(270, 75%, 60%);"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl(210, 75%, 60%);"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><mention class="mention" data-id="63594" data-type="work_package" data-text="#63594">#63594</mention>&nbsp;</p></td><td class="op-uc-table--cell"><p class="op-uc-p"><strong>16.2</strong></p></td><td class="op-uc-table--cell"><p class="op-uc-p">workPackageValue:63594:status</p></td><td class="op-uc-table--cell" style="background-color:hsl(210, 75%, 60%);"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl(210, 75%, 60%);"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl(210, 75%, 60%);"><p class="op-uc-p">Introduces Primer implementation**</p></td><td class="op-uc-table--cell" style="background-color:hsl(210, 75%, 60%);"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl(270, 75%, 60%);"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl(210, 75%, 60%);"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl(210, 75%, 60%);"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl(270, 75%, 60%);"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell" style="background-color:hsl(210, 75%, 60%);"><p class="op-uc-p"><br></p></td></tr><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><br></p></td></tr></tbody></table></figure>

Key:

* ORANGE - ANGULAR

* LIGHT BLUE - PRIMER

* PURPLE - INTEROP


\* relies changes introduced in &nbsp;<mention class="mention" data-id="64475" data-type="work_package" data-text="#64475">#64475</mention> for project attribute (custom field) support.

<br>End of the insertion