Replace native title tooltip with styled hover badge for attribution

Show a colored badge (author dot + name + relative time) on hover
instead of the browser's plain title tooltip. Badge uses a solid
white background with the author's color on border and text, and
appears below the hovered node. CSS is injected once from AstRenderer
rather than per-Node.

Author: shikokuchuo

hub-client/src/components/render/ReactAstDebugRenderer.test.tsx

@@ -8,7 +8,7 @@
 
 import { describe, it, expect } from 'vitest';
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import { Ast } from './ReactAstDebugRenderer';
 import type { PandocAST } from './ReactAstDebugRenderer';
 import { NodeAttributionContext } from './ReactAstDebugRenderer';
@@ -30,8 +30,8 @@ function makeAstJson(opts?: { sourceInfoId?: number }): string {
 }
 
 describe('Node rendering with attribution', () => {
-  it('renders with attribution color and title tooltip when context is provided', () => {
-    const mockGetNodeAttribution = (sourceInfoId: number): NodeAttribution | null => ({
+  it('renders colored badge with author name on attributed nodes', () => {
+    const mockGetNodeAttribution = (_sourceInfoId: number): NodeAttribution | null => ({
       actor: 'actor1',
       time: 1700000000000,
       color: '#E91E63',
@@ -42,44 +42,48 @@ describe('Node rendering with attribution', () => {
 
     const { container } = render(
       <NodeAttributionContext.Provider value={{ getNodeAttribution: mockGetNodeAttribution }}>
-        <Ast
-          astJson={astJson}
-          setAst={() => {}}
-        />
+        <Ast astJson={astJson} setAst={() => {}} />
       </NodeAttributionContext.Provider>
     );
 
-    // Find the Str node's span — it should have the attribution color
-    const strSpan = container.querySelector('[title]');
-    expect(strSpan).not.toBeNull();
-    expect(strSpan!.getAttribute('title')).toContain('Alice');
-    expect((strSpan as HTMLElement).style.color).toBe('rgb(233, 30, 99)'); // #E91E63
+    // Badge element should exist with author name
+    const badge = container.querySelector('.q2-attr-badge');
+    expect(badge).not.toBeNull();
+    expect(badge!.textContent).toContain('Alice');
+
+    // Wrapper should have the attribution color
+    const wrapper = container.querySelector('.q2-attr-wrap');
+    expect(wrapper).not.toBeNull();
+    expect((wrapper as HTMLElement).style.color).toBe('rgb(233, 30, 99)'); // #E91E63
   });
 
-  it('renders identically to current behavior when attribution context is null', () => {
+  it('renders without badge when attribution context is null', () => {
     const astJson = makeAstJson({ sourceInfoId: 42 });
 
-    const { container: withoutCtx } = render(
+    const { container } = render(
       <Ast astJson={astJson} setAst={() => {}} />
     );
 
-    // Should render without any attribution styling — no title attribute on Str
-    const strSpans = withoutCtx.querySelectorAll('span');
-    const strSpan = Array.from(strSpans).find(s => s.textContent?.includes('hello'));
+    // No badge or attribution wrapper
+    expect(container.querySelector('.q2-attr-badge')).toBeNull();
+    expect(container.querySelector('.q2-attr-wrap')).toBeNull();
+
+    // Str still renders
+    const strSpan = Array.from(container.querySelectorAll('span')).find(
+      s => s.textContent?.includes('hello'),
+    );
     expect(strSpan).toBeTruthy();
-    // No title attribute when no attribution context
-    expect(strSpan!.hasAttribute('title')).toBe(false);
   });
 
-  it('renders without attribution styling when node has no s field', () => {
+  it('renders without badge when node has no s field', () => {
     const mockGetNodeAttribution = (_id: number): NodeAttribution | null => ({
       actor: 'actor1',
       time: 1700000000000,
       color: '#E91E63',
       name: 'Alice',
     });
 
-    // No sourceInfoId set on the Str node
+    // No sourceInfoId on the Str node
     const astJson = makeAstJson();
 
     const { container } = render(
@@ -88,10 +92,7 @@ describe('Node rendering with attribution', () => {
       </NodeAttributionContext.Provider>
     );
 
-    // Str span should render but without attribution (no title)
-    const strSpans = container.querySelectorAll('span');
-    const strSpan = Array.from(strSpans).find(s => s.textContent?.includes('hello'));
-    expect(strSpan).toBeTruthy();
-    expect(strSpan!.hasAttribute('title')).toBe(false);
+    // No badge since node has no source info
+    expect(container.querySelector('.q2-attr-badge')).toBeNull();
   });
 });

hub-client/src/components/render/ReactAstDebugRenderer.tsx

@@ -592,6 +592,7 @@ const AstRenderer = ({ ast, onNavigateToDocument, setAst }: {
     // Otherwise, allow any external provider to pass through.
     return nodeAttributionValue ? (
         <NodeAttributionContext.Provider value={nodeAttributionValue}>
+            <style>{attributionStyles}</style>
             {tree}
         </NodeAttributionContext.Provider>
     ) : tree;
@@ -627,6 +628,51 @@ function formatRelativeTime(timestamp: number): string {
     return `${diffDay}d ago`;
 }
 
+/** Styled tooltip that appears on hover, colored to match the author */
+function AttributionBadge({ attr }: { attr: { name: string; time: number; color: string } }) {
+    return <span className="q2-attr-badge" style={{
+        '--attr-color': attr.color,
+    } as React.CSSProperties}>
+        <span className="q2-attr-badge-dot" style={{ backgroundColor: attr.color }} />
+        {attr.name} <span className="q2-attr-badge-time">{formatRelativeTime(attr.time)}</span>
+    </span>;
+}
+
+/** Hover styles for attribution badges — rendered once per AstRenderer */
+const attributionStyles = `
+    .q2-attr-wrap { position: relative; }
+    .q2-attr-badge {
+        display: none;
+        position: absolute;
+        bottom: -20px;
+        left: 0;
+        z-index: 10;
+        font-size: 10px;
+        line-height: 1;
+        white-space: nowrap;
+        padding: 2px 6px;
+        border-radius: 3px;
+        background: #fff;
+        border: 1px solid var(--attr-color);
+        color: var(--attr-color);
+        font-weight: 600;
+        pointer-events: none;
+    }
+    .q2-attr-badge-dot {
+        display: inline-block;
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        margin-right: 3px;
+        vertical-align: middle;
+    }
+    .q2-attr-badge-time {
+        font-weight: 400;
+        opacity: 0.7;
+    }
+    .q2-attr-wrap:hover > .q2-attr-badge { display: inline-block; }
+`;
+
 const Node = ({
     node,
     onNavigateToDocument,
@@ -640,18 +686,11 @@ const Node = ({
     const registry = registries?.registry ?? componentRegistry;
     const attributionCtx = useContext(NodeAttributionContext);
 
-    // Extract per-node attribution styling
+    // Resolve attribution for this node
     const sourceInfoId = (node as { s?: number }).s;
-    let attributionStyle: React.CSSProperties | undefined;
-    let attributionTitle: string | undefined;
-
-    if (sourceInfoId != null && attributionCtx) {
-        const attr = attributionCtx.getNodeAttribution(sourceInfoId);
-        if (attr) {
-            attributionStyle = { color: attr.color };
-            attributionTitle = `${attr.name}, ${formatRelativeTime(attr.time)}`;
-        }
-    }
+    const attr = (sourceInfoId != null && attributionCtx)
+        ? attributionCtx.getNodeAttribution(sourceInfoId)
+        : null;
 
     // Check if it's a Block type by looking at common block tags
     const blockTypes = ['Para', 'Plain', 'Header', 'CodeBlock', 'BulletList', 'OrderedList', 'BlockQuote', 'Div', 'HorizontalRule', 'RawBlock', 'Figure'];
@@ -662,7 +701,8 @@ const Node = ({
         if (!BlockComponent) {
             return <div style={blockStyle}><strong>Block wrapper not registered</strong></div>;
         }
-        return <div style={attributionStyle} title={attributionTitle}>
+        return <div className={attr ? 'q2-attr-wrap' : undefined} style={attr ? { color: attr.color } : undefined}>
+            {attr && <AttributionBadge attr={attr} />}
             <BlockComponent
                 node={node as BlockNode}
                 onNavigateToDocument={onNavigateToDocument}
@@ -674,7 +714,8 @@ const Node = ({
         if (!InlineComponent) {
             return <span style={inlineStyle}><strong>Inline wrapper not registered</strong></span>;
         }
-        return <span style={attributionStyle} title={attributionTitle}>
+        return <span className={attr ? 'q2-attr-wrap' : undefined} style={attr ? { color: attr.color } : undefined}>
+            {attr && <AttributionBadge attr={attr} />}
             <InlineComponent
                 node={node as InlineNode}
                 onNavigateToDocument={onNavigateToDocument}