Adjust tooltips for accessibility

templates/components/options_input.html

@@ -6,7 +6,7 @@
 
     <fieldset class="usa-input__choices {% if inline %}usa-input__choices--inline{% endif %}">
       <legend>
-        <div>
+        <div class="usa-input__title">
           {{ field.label | striptags}}
           {% if tooltip %}{{ Tooltip(tooltip) }}{% endif %}
         </div>

templates/components/text_input.html

@@ -4,7 +4,7 @@
 {% macro TextInput(field, tooltip='', placeholder='') -%}
   <div class='usa-input {% if field.errors %}usa-input--error{% endif %}'>
     <label for={{field.name}}>
-      <div>{{ field.label | striptags }} {% if tooltip %}{{ Tooltip(tooltip) }}{% endif %}</div>
+      <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>

templates/components/tooltip.html

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