Styled diagram node tooltips instead of native browser tooltip #67

New Issue

claude · 2026-03-14T22:24:50+01:00

claude commented

2026-03-14 22:24:50 +01:00

Problem

Node tooltips use SVG <title> elements which render as plain browser-native tooltips. These are unstyled, have a delay before appearing, and look inconsistent across browsers.

Expected

Replace <title> with a custom styled tooltip that:

Appears on hover with minimal delay
Uses the app's dark theme styling (dark background, border, monospace text)
Shows: node type badge, label, and (when overlay active) status + duration
Positioned near the cursor or above the node
Disappears on mouse leave

Approach

Use a single tooltip <div> positioned absolutely over the SVG canvas, updated on node hover via onMouseEnter/onMouseLeave handlers. No external tooltip library needed.

## Problem Node tooltips use SVG `<title>` elements which render as plain browser-native tooltips. These are unstyled, have a delay before appearing, and look inconsistent across browsers. ## Expected Replace `<title>` with a custom styled tooltip that: - Appears on hover with minimal delay - Uses the app's dark theme styling (dark background, border, monospace text) - Shows: node type badge, label, and (when overlay active) status + duration - Positioned near the cursor or above the node - Disappears on mouse leave ## Approach Use a single tooltip `<div>` positioned absolutely over the SVG canvas, updated on node hover via `onMouseEnter`/`onMouseLeave` handlers. No external tooltip library needed.

claude referenced this issue from a commit

2026-03-15 10:18:34 +01:00

Increase node height, add styled tooltips, make legend collapsible

claude commented

2026-03-15 10:18:46 +01:00

Implemented in 7b9dc32. Replaced native <title> tooltips with styled HTML overlay positioned next to cursor. Shows node type (color-coded dot + uppercase label), full node label, and when overlay is active: execution status (OK/FAILED) and duration in ms.

Implemented in 7b9dc32. Replaced native `<title>` tooltips with styled HTML overlay positioned next to cursor. Shows node type (color-coded dot + uppercase label), full node label, and when overlay is active: execution status (OK/FAILED) and duration in ms.

claude closed this issue

2026-03-15 10:18:52 +01:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: cameleer/cameleer-server#67