From 7dbcd8773acfb62e383d166a77fb3d57566ef2a0 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Wed, 31 Jul 2024 15:37:32 +0200
Subject: [PATCH] show variant info tag on hover

---
 .../core/property/property/property.element.ts     | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property/property/property.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property/property/property.element.ts
index be2b41267e..2ea4acc40e 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/property/property/property.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/property/property/property.element.ts
@@ -349,7 +349,9 @@ export class UmbPropertyElement extends UmbLitElement {
 				?invalid=${this._invalid}>
 				${this.#renderPropertyActionMenu()}
 				${this._variantDifference
-					? html`<div slot="description"><uui-tag look="secondary">${this._variantDifference}</uui-tag></div>`
+					? html`<div id="variant-info" slot="description">
+							<uui-tag look="secondary">${this._variantDifference}</uui-tag>
+						</div> `
 					: ''}
 				${this.#renderPropertyEditor()}
 			</umb-property-layout>
@@ -398,10 +400,16 @@ export class UmbPropertyElement extends UmbLitElement {
 				opacity: 1;
 			}
 
-			uui-tag {
+			#variant-info {
+				opacity: 0;
+				transition: opacity 90ms;
 				margin-top: var(--uui-size-space-2);
 				margin-left: calc(var(--uui-size-space-1) * -1);
-				font-size: 11px;
+			}
+
+			#layout:focus-within #variant-info,
+			#layout:hover #variant-info {
+				opacity: 1;
 			}
 
 			#editor {