From 02e3ef0a7213852624679100c807363cbc74105f Mon Sep 17 00:00:00 2001
From: Alexandre Rousseau <alexandre@rsseau.fr>
Date: Thu, 26 Dec 2024 10:49:35 +0100
Subject: [PATCH] feat(ui): display tooltip only if the element overflow

I introduce a new attribute `data-writer-tooltip-strategy` that define
when the tooltip should be display.

In `overflow` mode, we check that the element has wrapped text inside`.
---
 src/ui/src/builder/BuilderSelect.vue  |  9 +++++++--
 src/ui/src/builder/BuilderTooltip.vue | 10 +++++++++-
 src/ui/src/wds/WdsDropdownMenu.vue    |  6 +++++-
 3 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/ui/src/builder/BuilderSelect.vue b/src/ui/src/builder/BuilderSelect.vue
index 1e546c1b..526f2f37 100644
--- a/src/ui/src/builder/BuilderSelect.vue
+++ b/src/ui/src/builder/BuilderSelect.vue
@@ -3,13 +3,18 @@
 		<button
 			class="BuilderSelect__trigger"
 			role="button"
-			:data-writer-tooltip="currentLabel"
 			@click="isOpen = !isOpen"
 		>
 			<i v-if="!hideIcons" class="material-symbols-outlined">{{
 				currentIcon
 			}}</i>
-			<div class="BuilderSelect__trigger__label">{{ currentLabel }}</div>
+			<div
+				class="BuilderSelect__trigger__label"
+				data-writer-tooltip-strategy="overflow"
+				:data-writer-tooltip="currentLabel"
+			>
+				{{ currentLabel }}
+			</div>
 			<div class="BuilderSelect__trigger__arrow">
 				<i class="material-symbols-outlined">{{ expandIcon }}</i>
 			</div>
diff --git a/src/ui/src/builder/BuilderTooltip.vue b/src/ui/src/builder/BuilderTooltip.vue
index 2420db69..513914da 100644
--- a/src/ui/src/builder/BuilderTooltip.vue
+++ b/src/ui/src/builder/BuilderTooltip.vue
@@ -43,7 +43,8 @@ async function setUpAndShowTooltip() {
 	const gapPx = trackedElement.dataset.writerTooltipGap
 		? parseInt(trackedElement.dataset.writerTooltipGap)
 		: DEFAULT_GAP_PX;
-	isActive.value = true;
+	isActive.value = canBeActive(trackedElement);
+	if (!isActive.value) return;
 	await nextTick();
 	const { x, y, width, height } = trackedElement.getBoundingClientRect();
 	const { width: tooltipWidth, height: tooltipHeight } =
@@ -69,6 +70,12 @@ async function setUpAndShowTooltip() {
 	}
 }
 
+function canBeActive(el: HTMLElement) {
+	const strategy = el.getAttribute("data-writer-tooltip-strategy");
+	if (strategy === "overflow") return el.scrollWidth > el.clientWidth;
+	return true;
+}
+
 function handleMouseover(ev: MouseEvent) {
 	const el = ev.target as HTMLElement;
 
@@ -98,6 +105,7 @@ async function confirmTooltip(el: HTMLElement) {
 		attributeFilter: [
 			"data-writer-tooltip",
 			"data-writer-tooltip-placement",
+			"data-writer-tooltip-strategy",
 		],
 	});
 	setUpAndShowTooltip();
diff --git a/src/ui/src/wds/WdsDropdownMenu.vue b/src/ui/src/wds/WdsDropdownMenu.vue
index d2b091a6..530b5414 100644
--- a/src/ui/src/wds/WdsDropdownMenu.vue
+++ b/src/ui/src/wds/WdsDropdownMenu.vue
@@ -25,7 +25,11 @@
 			<i v-if="!hideIcons" class="material-symbols-outlined">{{
 				getOptionIcon(option)
 			}}</i>
-			<div class="WdsDropdownMenu__item__label">
+			<div
+				class="WdsDropdownMenu__item__label"
+				:data-writer-tooltip="option.label"
+				data-writer-tooltip-strategy="overflow"
+			>
 				{{ option.label }}
 			</div>
 			<i