Keep whitespace between field label asterisk and title

awx/ui/client/legacy-styles/ansible-ui.less

@@ -348,6 +348,10 @@ textarea.allowresize {
   margin-right: -5px;
 }
 
+.prepend-asterisk.user-password:before {
+   margin-right: 0;
+}
+
 .subtitle {
   font-size: 16px;
 }

awx/ui/client/src/shared/directives.js

@@ -420,6 +420,10 @@ function(ConfigurationUtils, i18n, $rootScope) {
 .directive('awRequiredWhen', function() {
     return {
         require: 'ngModel',
+        compile: function(tElem) {
+            let label = $(tElem).closest('.form-group').find('label').first();
+            $(label).addClass('prepend-asterisk');
+        },
         link: function(scope, elm, attrs, ctrl) {
 
             function updateRequired() {

awx/ui/client/src/templates/survey-maker/shared/question-definition.form.js

@@ -41,15 +41,18 @@ export default ['i18n', function(i18n){
         variable: {
             realName: 'variable',
             type: 'custom',
-            control:'<label class="prepend-asterisk" for="variable"><span class="Form-inputLabel" translate> ANSWER VARIABLE NAME</span>'+
+            label: i18n._('Answer Variable Name'),
-                '<a id="awp-variable" href="" aw-pop-over="The suggested format for variable names is lowercase and underscore-separated (for example, foo_bar, user_id, host_name, etc.). Variable names with spaces are not allowed." '+
+            control:
-                'data-placement="right" data-container="body" popover-title="Answer Variable Name" class="help-link" data-original-title="" title="" tabindex="-1"><i class="fa fa-question-circle"></i></a> </label>'+
                 '<div><input type="text" ng-model="variable" name="variable" id="survey_question_variable" class="form-control Form-textInput ng-pristine ng-invalid ng-invalid-required" required="" aw-survey-variable-name>'+
                 '<div class="error ng-hide" id="survey_question-variable-required-error" ng-show="survey_question_form.variable.$dirty && survey_question_form.variable.$error.required" translate>Please enter an answer variable name.</div>'+
                 '<div class="error ng-hide" id="survey_question-variable-variable-error" ng-show="survey_question_form.variable.$dirty && survey_question_form.variable.$error.variable" translate>Please remove the illegal character from the survey question variable name.</div>'+
                 '<div class="error ng-hide" id="survey_question-variable-duplicate-error" ng-show="duplicate" translate>This question variable is already in use.  Please enter a different variable name.</div>' +
                 '<div class="error api-error ng-binding" id="survey_question-variable-api-error" ng-bind="variable_api_error"></div>'+
                 '</div>',
+            awPopOver: i18n._("The suggested format for variable names is lowercase and underscore-separated (for example, foo_bar, user_id, host_name, etc.). Variable names with spaces are not allowed."),
+            dataTitle: i18n._('Answer Variable Name'),
+            dataPlacement: 'right',
+            dataContainer: "body",
             required: true,
             column: 1,
             class: 'Form-formGroup--singleColumn'

awx/ui/client/src/users/users.form.js

@@ -70,7 +70,7 @@ export default ['i18n', function(i18n) {
                     hasShowInputButton: true,
                     ngShow: 'ldap_user == false && socialAuthUser === false && external_account === null',
                     ngRequired: "$state.match('add')",
-                    labelNGClass: "{'prepend-asterisk' : $state.matches('add')}",
+                    labelNGClass: "{'prepend-asterisk user-password' : $state.matches('add')}",
                     ngChange: "clearPWConfirm('password_confirm')",
                     autocomplete: false,
                     ngDisabled: '!(user_obj.summary_fields.user_capabilities.edit || canAdd)'
@@ -81,7 +81,7 @@ export default ['i18n', function(i18n) {
                     hasShowInputButton: true,
                     ngShow: 'ldap_user == false && socialAuthUser === false && external_account === null',
                     ngRequired: "$state.match('add')",
-                    labelNGClass: "{'prepend-asterisk' : $state.matches('add')}",
+                    labelNGClass: "{'prepend-asterisk user-password' : $state.matches('add')}",
                     awPassMatch: true,
                     associated: 'password',
                     autocomplete: false,