Begin adding tooltips to req form fields

atst/forms/request.py

@@ -26,9 +26,6 @@ class RequestForm(ValidatedForm):
     jedi_usage = TextAreaField(
         "JEDI Usage",
         description="Briefly describe how you are expecting to use the JEDI Cloud",
-        render_kw={
-            "placeholder": "e.g. We are migrating XYZ application to the cloud so that..."
-        },
     )
 
     # Details of Use: Cloud Readiness

styles/elements/_inputs.scss

@@ -71,7 +71,7 @@
     @include line-max;
     position: relative;
 
-    .icon {
+    .icon-validation {
       position: absolute;
       left: 100%;
       top: 100%;

styles/elements/_tooltip.scss

@@ -109,5 +109,5 @@
 }
 
 .tooltip-wrapper {
-
+  // display: none;
 }

templates/components/options_input.html

@@ -12,7 +12,7 @@
         {% endif %}
 
         {% if field.errors %}
-          {{ Icon('alert') }}
+          <span class="icon-validation">{{ Icon('alert') }}</span>
         {% endif %}
       </legend>
 

templates/components/text_input.html

@@ -1,15 +1,16 @@
 {% from "components/icon.html" import Icon %}
+{% from "components/tooltip.html" import Tooltip %}
 
-{% macro TextInput(field, placeholder='') -%}
+{% macro TextInput(field, tooltip='', placeholder='') -%}
   <div class='usa-input {% if field.errors %}usa-input--error{% endif %}'>
     <label for={{field.name}}>
-      {{ field.label }}
+      {{ field.label }} {% if tooltip %}{{ Tooltip(tooltip) }}{% endif %}
 
       {% if field.description %}
         <span class='usa-input__help'>{{ field.description | safe }}</span>
       {% endif %}
 
-      {% if field.errors %}{{ Icon('alert') }}{% endif %}
+      {% if field.errors %} <span class="icon-validation">{{ Icon('alert') }}</span>{% endif %}
     </label>
 
     {{ field(placeholder=placeholder) | safe }}

templates/components/tooltip.html

@@ -2,7 +2,7 @@
 
 {% macro Tooltip(message) -%}
 
-  <span class="tooltip-wrapper" v-tooltip="{content: '{{message}}'}">
+  <span class="icon-tooltip" v-tooltip="{content: '{{message}}'}">
     {{ Icon('help') }}
   </span>
 

templates/requests/screen-1.html

@@ -23,7 +23,7 @@
 
 <h2>General</h2>
 {{ TextInput(f.dod_component) }}
-{{ TextInput(f.jedi_usage,placeholder="e.g. We are migrating XYZ application to the cloud so that...") }}
+{{ TextInput(f.jedi_usage,placeholder="e.g. We are migrating XYZ application to the cloud so that...",tooltip="Your answer will help us provide tangible examples to DoD leadership how and why commercial cloud resources are accelerating the Departments missions.<br>Please tell us more about what the systems / applications you are working with and why the cloud is a good place to host these applications.") }}
 
 <h2>Cloud Readiness</h2>
 {{ TextInput(f.num_software_systems,placeholder="Number of systems") }}