feat: Adds helper text for custom fields in contact sidebars (#9317)

* feat: Adds helper text for custom fields in contact sidebars

* Update app/javascript/dashboard/components/ui/HelperTextPopup.vue

Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>

* chore: Review fix

---------

Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>

app/javascript/dashboard/components/CustomAttribute.vue

@@ -12,7 +12,7 @@
         </div>
         <div class="flex items-center justify-between w-full">
           <span
-            class="w-full font-medium text-sm mb-0"
+            class="w-full inline-flex gap-1.5 items-start font-medium whitespace-nowrap text-sm mb-0"
             :class="
               $v.editedValue.$error
                 ? 'text-red-400 dark:text-red-500'
@@ -20,6 +20,11 @@
             "
           >
             {{ label }}
+            <helper-text-popup
+              v-if="description"
+              :message="description"
+              class="mt-0.5"
+            />
           </span>
           <woot-button
             v-if="showCopyAndDeleteButton"
@@ -41,7 +46,7 @@
             ref="inputfield"
             v-model="editedValue"
             :type="inputType"
-            class="!h-8 ltr:rounded-r-none rtl:rounded-l-none !mb-0 !text-sm"
+            class="!h-8 ltr:!rounded-r-none rtl:!rounded-l-none !mb-0 !text-sm"
             autofocus="true"
             :class="{ error: $v.editedValue.$error }"
             @blur="$v.editedValue.$touch"
@@ -130,22 +135,25 @@
 </template>
 
 <script>
-import { mixin as clickaway } from 'vue-clickaway';
 import { format, parseISO } from 'date-fns';
 import { required, url } from 'vuelidate/lib/validators';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import MultiselectDropdown from 'shared/components/ui/MultiselectDropdown.vue';
+import HelperTextPopup from 'dashboard/components/ui/HelperTextPopup.vue';
 import { isValidURL } from '../helper/URLHelper';
 import customAttributeMixin from '../mixins/customAttributeMixin';
+
 const DATE_FORMAT = 'yyyy-MM-dd';
 
 export default {
   components: {
     MultiselectDropdown,
+    HelperTextPopup,
   },
-  mixins: [customAttributeMixin, clickaway],
+  mixins: [customAttributeMixin],
   props: {
     label: { type: String, required: true },
+    description: { type: String, default: '' },
     values: { type: Array, default: () => [] },
     value: { type: [String, Number, Boolean], default: '' },
     showActions: { type: Boolean, default: false },