fix(timeline): position tooltip above cursor to prevent overlap (#758)

The timeline tooltip was positioned at/below the cursor, overlapping
and obscuring the timeline bars underneath. Two changes:

1. CSS: Added transform: translateY(-100%) on .vis-tooltip to shift
   the tooltip above the cursor instead of below it
2. Changed overflowMethod from 'cap' to 'flip' so the tooltip flips
   to the other side when it would overflow the timeline boundary,
   rather than being clipped

Fixes ActivityWatch/activitywatch#1181

Author: TimeToBuildBob

src/visualizations/VisTimeline.vue

@@ -19,6 +19,15 @@ div#visualization {
     overflow: visible;
   }
 
+  .vis-tooltip {
+    // Position tooltip above the cursor instead of overlapping the timeline bars
+    transform: translateY(-100%);
+    margin-top: -15px;
+    // Ensure tooltip is readable
+    max-width: 400px;
+    pointer-events: none;
+  }
+
   .timeline-timeline {
     font-family: sans-serif !important;
 
@@ -83,7 +92,7 @@ export default {
         stack: false,
         tooltip: {
           followMouse: true,
-          overflowMethod: 'cap',
+          overflowMethod: 'flip',
           delay: 0,
         },
       },