diff --git a/web/src/tippyjs.ts b/web/src/tippyjs.ts
index adaf9a552a..9b244f4516 100644
--- a/web/src/tippyjs.ts
+++ b/web/src/tippyjs.ts
@@ -612,7 +612,7 @@ export function initialize(): void {
     });
 
     delegate("body", {
-        target: ".custom-user-field-label-wrapper",
+        target: ".custom-user-field-label-wrapper.required-field-wrapper",
         content: $t({
             defaultMessage: "This profile field is required.",
         }),
diff --git a/web/templates/settings/custom_user_profile_field.hbs b/web/templates/settings/custom_user_profile_field.hbs
index af4a3d8325..477cec98db 100644
--- a/web/templates/settings/custom_user_profile_field.hbs
+++ b/web/templates/settings/custom_user_profile_field.hbs
@@ -1,6 +1,6 @@
 <div class="custom_user_field" name="{{ field.name }}" data-field-id="{{ field.id }}">
-    <span class="custom-user-field-label-wrapper">
-        <label class="inline-block {{#if field.required}}required-field{{/if}}" for="{{ field.name }}" class="title">{{ field.name }}</label>
+    <span class="custom-user-field-label-wrapper {{#if field.required}}required-field-wrapper{{/if}}">
+        <label class="inline-block" for="{{ field.name }}" class="title">{{ field.name }}</label>
         <span class="required-symbol {{#unless is_empty_required_field}}hidden{{/unless}}"> *</span>
     </span>
     <div class="alert-notification custom-field-status"></div>