diff --git a/frappe/public/js/frappe/form/controls/base_control.js b/frappe/public/js/frappe/form/controls/base_control.js
index 37cb977fdc..2188f29e94 100644
--- a/frappe/public/js/frappe/form/controls/base_control.js
+++ b/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(`${__(this.df.fieldname)}`);
+
+ this.tooltip = $(`${__(this.df.fieldname)}`);
+ this.$wrapper.append(this.tooltip);
+
+ this.tooltip.on("click", (e) => {
+ let text = $(e.target).text();
+ frappe.utils.copy_to_clipboard(text);
+ });
}
make_wrapper() {
diff --git a/frappe/public/js/frappe/form/layout.js b/frappe/public/js/frappe/form/layout.js
index b425bfd475..2f400c8313 100644
--- a/frappe/public/js/frappe/form/layout.js
+++ b/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) {
diff --git a/frappe/public/scss/common/css_variables.scss b/frappe/public/scss/common/css_variables.scss
index d4a09beab1..1914e7479b 100644
--- a/frappe/public/scss/common/css_variables.scss
+++ b/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);
diff --git a/frappe/public/scss/desk/dark.scss b/frappe/public/scss/desk/dark.scss
index b299c042d3..aad3e4b597 100644
--- a/frappe/public/scss/desk/dark.scss
+++ b/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);
diff --git a/frappe/public/scss/desk/form.scss b/frappe/public/scss/desk/form.scss
index b2cb19baf7..80121db3cf 100644
--- a/frappe/public/scss/desk/form.scss
+++ b/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;
}