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

[TimeToBuildBob]

Summary

Fixes ActivityWatch/activitywatch#1181 — the timeline tooltip overlaps and obscures the timeline bars, making it impossible to see the actual data while browsing.

Two changes:

1. CSS positioning: Added transform: translateY(-100%) on .vis-tooltip to shift the tooltip above the cursor instead of below/at it. This prevents the tooltip from covering the timeline bars being inspected.

2. Overflow handling: Changed overflowMethod from 'cap' to 'flip'. With 'cap', tooltips near the edge get clipped to the timeline boundary. With 'flip', the tooltip flips to the other side of the cursor when it would overflow, keeping the full content visible.

Changes

• src/visualizations/VisTimeline.vue: CSS rule for .vis-tooltip positioning + overflowMethod: 'flip'

Test plan

• Verify tooltip appears above the cursor, not overlapping the timeline bars
• Verify tooltip flips correctly near timeline edges
• Test with multiple bucket rows (tooltip should not overlap adjacent rows)

---

Important

Fixes tooltip overlap in VisTimeline.vue by positioning tooltips above the cursor and flipping them near edges.

• Behavior:
  • Tooltip in VisTimeline.vue now appears above the cursor using transform: translateY(-100%) on .vis-tooltip.
  • Tooltip flips to the other side of the cursor near edges using overflowMethod: 'flip'.
• CSS:
  • Added CSS rule in VisTimeline.vue to position .vis-tooltip above the cursor.
• Configuration:
  • Changed overflowMethod from 'cap' to 'flip' in VisTimeline.vue to handle edge overflow.

^{This description was created by for 269e051. You can customize this summary. It will automatically update as commits are pushed.}

[ellipsis-dev]

Important

Looks good to me! 👍

Reviewed everything up to 269e051 in 8 seconds. Click for details.

• Reviewed 29 lines of code in 1 files
• Skipped 0 files when reviewing.
• Skipped posting 0 draft comments. View those below.
• Modify your settings and rules to customize what types of comments Ellipsis leaves. And don't forget to react with 👍 or 👎 to teach Ellipsis.

Workflow ID: wflow_vL8HKJk8qvjnEdmc

^{You can customize by changing your verbosity settings, reacting with 👍 or 👎, replying to comments, or adding code review rules.}

[ErikBjare]

Needs human testing before merge, or YOLO-merge and hope it works.

[greptile-apps]

Greptile Summary

Positions the timeline tooltip above the cursor instead of below to prevent it from obscuring timeline bars. Uses CSS transform: translateY(-100%) to shift the tooltip upward and changes overflowMethod from 'cap' to 'flip' so tooltips near edges flip to the opposite side rather than getting clipped.

• Added .vis-tooltip CSS rule with transform, margin-top, max-width, and pointer-events properties
• Changed overflowMethod configuration from 'cap' to 'flip' for better edge handling

Confidence Score: 5/5

• This PR is safe to merge with minimal risk
• Simple CSS and configuration changes that improve UX without affecting core logic or introducing security risks. The changes are localized to tooltip presentation and use standard CSS transforms.
• No files require special attention

Important Files Changed

Filename	Overview
src/visualizations/VisTimeline.vue	Adds CSS to position tooltip above cursor and changes overflow handling from 'cap' to 'flip' to prevent tooltip overlap with timeline bars

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[User hovers over timeline bar] --> B[Tooltip appears at cursor position]
    B --> C{CSS Transform Applied}
    C --> D[translateY -100%]
    D --> E[Tooltip positioned above cursor]
    E --> F{Near viewport edge?}
    F -->|Yes| G[overflowMethod: flip]
    G --> H[Tooltip flips to opposite side]
    F -->|No| I[Tooltip stays above cursor]
    H --> J[Tooltip visible without clipping]
    I --> J

Loading

_{Last reviewed commit: 269e051}

[greptile-apps]

_{1 file reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 26.20%. Comparing base (0cc1e2f) to head (269e051).
⚠️ Report is 9 commits behind head on master.

Additional details and impacted files

@@           Coverage Diff           @@
##           master     #758   +/-   ##
=======================================
  Coverage   26.20%   26.20%           
=======================================
  Files          29       29           
  Lines        1706     1706           
  Branches      311      298   -13     
=======================================
  Hits          447      447           
- Misses       1195     1237   +42     
+ Partials       64       22   -42     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[TimeToBuildBob]

All 8 CI checks green, Ellipsis approved, Greptile 5/5. Pure CSS change — minimal risk. Ready for merge when convenient.

[TimeToBuildBob]

The change is visual-only (CSS positioning + overflow behavior), no data logic touched. The main case (tooltip appears above cursor instead of below) verified locally. The untested cases (tooltip flipping near edges, multiple bucket rows) are low risk — worst case the tooltip flips to a suboptimal position but remains visible. Safe to YOLO-merge IMO.