Begin adding tooltips to req form fields
This commit is contained in:
parent
659edcd183
commit
a9be4665ce
@ -26,9 +26,6 @@ class RequestForm(ValidatedForm):
|
|||||||
jedi_usage = TextAreaField(
|
jedi_usage = TextAreaField(
|
||||||
"JEDI Usage",
|
"JEDI Usage",
|
||||||
description="Briefly describe how you are expecting to use the JEDI Cloud",
|
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
|
# Details of Use: Cloud Readiness
|
||||||
|
@ -71,7 +71,7 @@
|
|||||||
@include line-max;
|
@include line-max;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
.icon {
|
.icon-validation {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 100%;
|
left: 100%;
|
||||||
top: 100%;
|
top: 100%;
|
||||||
|
@ -109,5 +109,5 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.tooltip-wrapper {
|
.tooltip-wrapper {
|
||||||
|
// display: none;
|
||||||
}
|
}
|
@ -12,7 +12,7 @@
|
|||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
{% if field.errors %}
|
{% if field.errors %}
|
||||||
{{ Icon('alert') }}
|
<span class="icon-validation">{{ Icon('alert') }}</span>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</legend>
|
</legend>
|
||||||
|
|
||||||
|
@ -1,15 +1,16 @@
|
|||||||
{% from "components/icon.html" import Icon %}
|
{% 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 %}'>
|
<div class='usa-input {% if field.errors %}usa-input--error{% endif %}'>
|
||||||
<label for={{field.name}}>
|
<label for={{field.name}}>
|
||||||
{{ field.label }}
|
{{ field.label }} {% if tooltip %}{{ Tooltip(tooltip) }}{% endif %}
|
||||||
|
|
||||||
{% if field.description %}
|
{% if field.description %}
|
||||||
<span class='usa-input__help'>{{ field.description | safe }}</span>
|
<span class='usa-input__help'>{{ field.description | safe }}</span>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
{% if field.errors %}{{ Icon('alert') }}{% endif %}
|
{% if field.errors %} <span class="icon-validation">{{ Icon('alert') }}</span>{% endif %}
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
{{ field(placeholder=placeholder) | safe }}
|
{{ field(placeholder=placeholder) | safe }}
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
|
|
||||||
{% macro Tooltip(message) -%}
|
{% macro Tooltip(message) -%}
|
||||||
|
|
||||||
<span class="tooltip-wrapper" v-tooltip="{content: '{{message}}'}">
|
<span class="icon-tooltip" v-tooltip="{content: '{{message}}'}">
|
||||||
{{ Icon('help') }}
|
{{ Icon('help') }}
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
|
@ -23,7 +23,7 @@
|
|||||||
|
|
||||||
<h2>General</h2>
|
<h2>General</h2>
|
||||||
{{ TextInput(f.dod_component) }}
|
{{ 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>
|
<h2>Cloud Readiness</h2>
|
||||||
{{ TextInput(f.num_software_systems,placeholder="Number of systems") }}
|
{{ TextInput(f.num_software_systems,placeholder="Number of systems") }}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user