One method that works quite well is to use the Bootstrap collapse visibility toggle.

The Form View when not being edited:

The Form View when being edited:

The Form View when being edited and a User clicks the help icon:

Once you have added the custom field, you can make an inherited View like this:

XML:

<xpath expr="//notebook" position="before">
  <group>
  
    <group>
      <label for="x_distributor"/>
      <div class="o_row">
        <field name="x_distributor"/>
         <span data-toggle="collapse" href="#x_distributor" role="button" 
               aria-expanded="false" aria-controls="x_distributor" 
               class="oe_edit_only fa fa-question-circle"/>
      </div>
    </group>
  
    <group>
    </group>
  
    <div class="collapse oe_edit_only" style="color: blue;" colspan="4" id="x_distributor">
      <b>HELP: The North American Industry Classification System Code can be found 
      <a target="new" href="https://www.naics.com/company-lookup-tool/">
      <u>here</u></a>. Please search by Phone or DUNS Number where possible.</b>
    </div>
  
  </group>  
</xpath>