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`.
writer · Dec 26, 2024 · 02e3ef0 · 02e3ef0
1 parent ed254ba
commit 02e3ef0
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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