Merge pull request #19448 from shariquerik/alt/option-to-see-fieldname

frappe/public/js/frappe/form/controls/base_control.js

@@ -13,7 +13,14 @@ frappe.ui.form.Control = class BaseControl {
 			.attr("data-fieldname", this.df.fieldname);
 		this.wrapper = this.$wrapper.get(0);
 		this.wrapper.fieldobj = this; // reference for event handlers
-		this.$wrapper.append(`<span class="tooltip-content">${__(this.df.fieldname)}</span>`);
+
+		this.tooltip = $(`<span class="tooltip-content">${__(this.df.fieldname)}</span>`);
+		this.$wrapper.append(this.tooltip);
+
+		this.tooltip.on("click", (e) => {
+			let text = $(e.target).text();
+			frappe.utils.copy_to_clipboard(text);
+		});
 	}
 
 	make_wrapper() {

frappe/public/js/frappe/form/layout.js

@@ -35,7 +35,7 @@ frappe.ui.form.Layout = class Layout {
 		}
 
 		this.setup_tab_events();
-		this.setup_tooltip_events();
+		this.frm && this.setup_tooltip_events();
 		this.render();
 	}
 
@@ -532,15 +532,21 @@ frappe.ui.form.Layout = class Layout {
 
 	setup_tooltip_events() {
 		$(document).on("keydown", (e) => {
-			if (e.metaKey || e.ctrlKey) {
+			if (e.altKey) {
 				this.wrapper.addClass("show-tooltip");
 			}
 		});
 		$(document).on("keyup", (e) => {
-			if (!e.metaKey || !e.ctrlKey) {
+			if (!e.altKey) {
 				this.wrapper.removeClass("show-tooltip");
 			}
 		});
+		this.frm.page &&
+			frappe.ui.keys.add_shortcut({
+				shortcut: "alt+hover",
+				page: this.frm.page,
+				description: __("Show Fieldname (click to copy on clipboard)"),
+			});
 	}
 
 	handle_tab(doctype, fieldname, shift) {

frappe/public/scss/common/css_variables.scss

@@ -166,6 +166,7 @@ $input-height: 28px !default;
 	--bg-red: var(--red-50);
 	--bg-gray: var(--gray-200);
 	--bg-light-gray: var(--gray-100);
+	--bg-dark-gray: var(--gray-900);
 	--bg-purple: var(--purple-100);
 	--bg-pink: var(--pink-50);
 	--bg-cyan: var(--cyan-50);

frappe/public/scss/desk/dark.scss

@@ -55,6 +55,7 @@
 	--bg-red: var(--red-500);
 	--bg-gray: var(--gray-600);
 	--bg-light-gray: var(--gray-700);
+	--bg-dark-gray: var(--gray-300);
 	--bg-purple: var(--purple-600);
 
 	--text-on-blue: var(--blue-50);

frappe/public/scss/desk/form.scss

@@ -3,16 +3,16 @@
 
 .tooltip-content {
 	position: absolute;
-	bottom: 104%;
+	bottom: 100%;
 	left: 0;
 	z-index: 9999;
 	padding: 2px 6px;
 	border-radius: var(--border-radius-sm);
-	background: var(--gray-dark);
+	background-color: var(--bg-dark-gray);
 	color: var(--text-dark);
 	font-size: var(--text-xs);
 	opacity: 0;
-	cursor: default;
+	cursor: copy;
 	transition: opacity 0.3s, transform 3s;
 	pointer-events: none;
 }