fix: Tooltip pops up above task description in short mode (#1735)

Tooltip used to have `mod-right` animation which block the task text in
short mode.

Fixes #1147

src/TaskLineRenderer.ts

@@ -170,7 +170,7 @@ function addTooltip({
 }): void {
     element.addEventListener('mouseenter', () => {
         const tooltip = element.createDiv();
-        tooltip.addClasses(['tooltip', 'mod-right']);
+        tooltip.addClasses(['tooltip', 'pop-up']);
 
         if (task.recurrence) {
             const recurrenceDiv = tooltip.createDiv();

styles.css

@@ -18,6 +18,29 @@
     padding-left: 20px;
 }
 
+/* Tooltip pop up above the description in short mode */
+.tooltip.pop-up {
+    animation: pop-up-animation 200ms forwards ease-in-out;
+}
+@keyframes pop-up-animation {
+  0% {
+    opacity: 0;
+    transform: translateY(-100%) scale(1);
+  }
+  20% {
+    opacity: 0.7;
+    transform: translateY(-100%) scale(1.02);
+  }
+  40% {
+    opacity: 1;
+    transform: translateY(-100%) scale(1.05);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(-100%) scale(1);
+  }
+}
+
 /* Pencil icon. */
 .tasks-edit {
     background-color: var(--text-faint);