From ac77355804c4d43387a875acd3a633fa15439208 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 6 Nov 2023 17:55:14 +0530
Subject: [PATCH] fix: added tooltip on read_only field

---
 frontend/src/pages/Deal.vue |  5 +++--
 frontend/src/pages/Lead.vue | 13 ++++++++++---
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/frontend/src/pages/Deal.vue b/frontend/src/pages/Deal.vue
index 1ec7f83b..e48efa3c 100644
--- a/frontend/src/pages/Deal.vue
+++ b/frontend/src/pages/Deal.vue
@@ -254,12 +254,12 @@
                         :debounce="500"
                         class="form-control"
                       />
-                      <div
+                      <Tooltip :text="field.tooltip"
                         class="flex h-7 cursor-pointer items-center px-2 py-1"
                         v-else-if="field.type === 'read_only'"
                       >
                         {{ field.value }}
-                      </div>
+                      </Tooltip>
                       <FormControl
                         v-else
                         type="text"
@@ -435,6 +435,7 @@ const detailSections = computed(() => {
           type: 'read_only',
           name: 'website',
           value: organization.value?.website,
+          tooltip: 'It is a read only field, value is fetched from organization',
         },
         {
           label: 'Amount',
diff --git a/frontend/src/pages/Lead.vue b/frontend/src/pages/Lead.vue
index f961274f..144e4d31 100644
--- a/frontend/src/pages/Lead.vue
+++ b/frontend/src/pages/Lead.vue
@@ -264,12 +264,13 @@
                           </Button>
                         </template>
                       </Dropdown>
-                      <div
+                      <Tooltip
+                        :text="field.tooltip"
                         class="flex h-7 cursor-pointer items-center px-2 py-1"
                         v-else-if="field.type === 'read_only'"
                       >
                         {{ field.value }}
-                      </div>
+                      </Tooltip>
                       <FormControl
                         v-else
                         type="text"
@@ -282,7 +283,11 @@
                       />
                     </div>
                     <ExternalLinkIcon
-                      v-if="field.type === 'link' && field.link && lead.data[field.name]"
+                      v-if="
+                        field.type === 'link' &&
+                        field.link &&
+                        lead.data[field.name]
+                      "
                       class="h-4 w-4 shrink-0 cursor-pointer text-gray-600"
                       @click="field.link(lead.data[field.name])"
                     />
@@ -463,6 +468,8 @@ const detailSections = computed(() => {
           type: 'read_only',
           name: 'website',
           value: organization.value?.website,
+          tooltip:
+            'It is a read only field, value is fetched from organization',
         },
         {
           label: 'Job title',