From 06a618c758d0a7f45536b2c5e8eb9d27ccd6426b Mon Sep 17 00:00:00 2001
From: Azri Kahar <42867097+azrikahar@users.noreply.github.com>
Date: Fri, 8 Jul 2022 15:35:08 +0800
Subject: [PATCH] Show field data type & interface on hover for system
 collections' fields (#14321)

* tweak tooltip when no interface configured

* add tooltip & interface name on hover
---
 .../data-model/fields/components/field-select.vue    | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/app/src/modules/settings/routes/data-model/fields/components/field-select.vue b/app/src/modules/settings/routes/data-model/fields/components/field-select.vue
index 67c634c75a..2322980964 100644
--- a/app/src/modules/settings/routes/data-model/fields/components/field-select.vue
+++ b/app/src/modules/settings/routes/data-model/fields/components/field-select.vue
@@ -6,8 +6,14 @@
 			</template>
 
 			<template #input>
-				<div class="label">
-					<span class="name">{{ field.field }}</span>
+				<div
+					v-tooltip="`${field.name} (${formatTitle(field.type)})${interfaceName ? ` - ${interfaceName}` : ''}`"
+					class="label"
+				>
+					<div class="label-inner">
+						<span class="name">{{ field.field }}</span>
+						<span v-if="interfaceName" class="interface">{{ interfaceName }}</span>
+					</div>
 				</div>
 			</template>
 		</v-input>
@@ -55,7 +61,7 @@
 
 				<template #input>
 					<div
-						v-tooltip="interfaceName ? `${field.name} (${formatTitle(field.type)}) - ${interfaceName}` : field.name"
+						v-tooltip="`${field.name} (${formatTitle(field.type)})${interfaceName ? ` - ${interfaceName}` : ''}`"
 						class="label"
 						@click="openFieldDetail"
 					>