tooltip UX update (#3508)

- added appearing animation
- removed delay on `mouseleave`

app/src/lib/utils/fileStatus.ts

@@ -13,6 +13,7 @@ export function computeFileStatus(file: AnyFile): FileStatus {
 		}
 		return 'M';
 	}
+
 	if (file.hunks.length == 1) {
 		const changeType = file.hunks[0].changeType;
 		if (changeType == 'added') {

app/src/lib/utils/tooltip.ts

@@ -39,7 +39,7 @@ export function tooltip(node: HTMLElement, optsOrString: ToolTipOptions | string
 
 	function onMouseLeave() {
 		// If tooltip shown when mouse out then we hide after delay
-		if (tooltip) hideAfterDelay();
+		if (tooltip) hide();
 		// But if we mouse out before tooltip is shown, we cancel the show timer
 		else if (timeoutId) {
 			clearTimeout(timeoutId);
@@ -63,13 +63,6 @@ export function tooltip(node: HTMLElement, optsOrString: ToolTipOptions | string
 		timeoutId = undefined;
 	}
 
-	function hideAfterDelay() {
-		if (timeoutId) {
-			clearTimeout(timeoutId);
-		}
-		timeoutId = setTimeout(() => hide(), 250);
-	}
-
 	function adjustPosition() {
 		if (!tooltip) return;
 

app/src/styles/main.postcss

@@ -28,6 +28,7 @@
 	--z-ground: 1;
 	--z-lifted: 2;
 	--z-floating: 3;
+	--z-tooltip: 4;
 	--z-blocker: 10;
 
 	/* TODO: add focus color */

app/src/styles/tooltip.css

@@ -6,10 +6,24 @@
 	color: var(--clr-core-ntrl-60);
 	display: inline-block;
 	padding: var(--size-6);
-	z-index: var(--z-floating);
+	z-index: var(--z-tooltip);
 
 	max-width: 11.25rem;
 	position: absolute;
 	left: -9999px;
 	top: -9999px;
+
+	opacity: 0;
+	animation: showup-tooltip-animation 0.1s ease-out forwards;
+}
+
+@keyframes showup-tooltip-animation {
+	from {
+		opacity: 0;
+		transform: translateY(-0.2rem) scale(0.9);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0) scale(1);
+	}
 }