Merge pull request #164 from dod-ccpo/ui/tooltips

UI/tooltips

templates/components/options_input.html

@@ -1,19 +1,23 @@
 {% from "components/icon.html" import Icon %}
+{% from "components/tooltip.html" import Tooltip %}
 
-{% macro OptionsInput(field, inline=False) -%}
+{% macro OptionsInput(field, tooltip, inline=False) -%}
   <optionsinput name='{{ field.name }}' inline-template key='{{ field.name }}'>
     <div class='usa-input {% if field.errors %}usa-input--error{% endif %}'>
 
       <fieldset v-on:change="onInput" class="usa-input__choices {% if inline %}usa-input__choices--inline{% endif %}">
         <legend>
-          {{ field.label | striptags}}
+          <div class="usa-input__title">
+            {{ field.label | striptags}}
+            {% if tooltip %}{{ Tooltip(tooltip) }}{% endif %}
+          </div>
 
           {% if field.description %}
             <span class='usa-input__help'>{{ field.description | safe }}</span>
           {% endif %}
 
           {% if field.errors %}
-            {{ Icon('alert') }}
+            {{ Icon('alert',classes="icon-validation") }}
           {% endif %}
         </legend>
 

templates/components/text_input.html

@@ -1,6 +1,7 @@
 {% from "components/icon.html" import Icon %}
+{% from "components/tooltip.html" import Tooltip %}
 
-{% macro TextInput(field, placeholder='', validation='anything', paragraph=False) -%}
+{% macro TextInput(field, tooltip='', placeholder='', validation='anything', paragraph=False) -%}
   <textinput
     name='{{ field.name }}'
     validation='{{ validation }}'
@@ -13,14 +14,14 @@
       v-bind:class="['usa-input usa-input--validation--' + validation, { 'usa-input--error': showError, 'usa-input--success': showValid }]">
 
       <label for={{field.name}}>
-        {{ field.label | striptags }}
+        <div class="usa-input__title">{{ field.label | striptags }} {% if tooltip %}{{ Tooltip(tooltip) }}{% endif %}</div>
 
         {% if field.description %}
           <span class='usa-input__help'>{{ field.description | safe }}</span>
         {% endif %}
 
-        <span v-show='showError'>{{ Icon('alert') }}</span>
-        <span v-show='showValid'>{{ Icon('ok') }}</span>
+        <span v-show='showError'>{{ Icon('alert',classes="icon-validation") }}</span>
+        <span v-show='showValid'>{{ Icon('ok',classes="icon-validation") }}</span>
 
       </label>
 
@@ -61,5 +62,5 @@
       </template>
 
     </div>
-</textinput>
+  </textinput>
 {%- endmacro %}

templates/components/tooltip.html

@@ -0,0 +1,9 @@
+{% from "components/icon.html" import Icon %}
+
+{% macro Tooltip(message,title='Help') -%}
+
+  <span class="icon-tooltip" v-tooltip="{content: '{{message}}'}">
+    {{ Icon('help') }}<span>{{ title }}</span>
+  </span>
+
+{%- endmacro %}