Drop note hover tooltip, click to view content

Hover tooltip was jarring (dark box on a light page) and popped even
when the note had no body. Marks now stay quiet on hover (only a faint
background tint as click affordance); clicking opens the existing note
editor, which reads the body from React state instead of the dataset.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

Author: sanbuphy

web/src/components/NotebookViewer.jsx

@@ -423,7 +423,6 @@ function setNoteAnchorMarkData(mark, data) {
   mark.dataset.sectionId = data.sectionId || ''
   mark.dataset.sectionTitle = data.sectionTitle || ''
   mark.dataset.noteQuote = data.quote || ''
-  mark.dataset.noteText = data.text || ''
 }
 
 function renderNoteAnchorMark(range, note) {
@@ -433,7 +432,6 @@ function renderNoteAnchorMark(range, note) {
     sectionId: note.sectionId,
     sectionTitle: note.sectionTitle,
     quote: note.quote,
-    text: note.text || '',
   })
   mark.appendChild(range.extractContents())
   range.insertNode(mark)
@@ -471,7 +469,6 @@ function syncSavedNotes(root, noteList) {
         sectionId: note.sectionId,
         sectionTitle: note.sectionTitle,
         quote: note.quote,
-        text: note.text || '',
       })
       return
     }
@@ -1403,13 +1400,15 @@ function NotebookViewer({ notebook, meta, loading, isBookmarked, toggleBookmark,
       event.stopPropagation()
       setSelectionToolbar(null)
       window.getSelection()?.removeAllRanges()
+      const noteId = noteAnchor.dataset.noteId || null
+      const matchedNote = noteId ? currentNotebookNotes.find((n) => n.id === noteId) : null
       const rect = noteAnchor.getBoundingClientRect()
       setNoteEditor({
-        noteId: noteAnchor.dataset.noteId || null,
+        noteId,
         sectionId: noteAnchor.dataset.sectionId || '',
         sectionTitle: noteAnchor.dataset.sectionTitle || '',
         quote: noteAnchor.dataset.noteQuote || noteAnchor.textContent,
-        text: noteAnchor.dataset.noteText || '',
+        text: matchedNote?.text || '',
         top: Math.max(80, rect.top - 20),
         left: Math.min(Math.max(rect.left, 80), window.innerWidth - 360),
       })

web/src/styles/index.css

@@ -1596,28 +1596,6 @@ mark.note-anchor code {
   background: transparent;
 }
 
-/* hover 时用 attr() 弹出笔记正文（纯 CSS，省一层 React state） */
-mark.note-anchor[data-note-text]:hover::after,
-mark.note-anchor[data-note-text]:focus-visible::after {
-  content: attr(data-note-text);
-  position: absolute;
-  left: 0;
-  bottom: calc(100% + 6px);
-  z-index: 90;
-  max-width: 320px;
-  padding: 8px 12px;
-  background: #1d1d1f;
-  color: #fff;
-  font-size: 13px;
-  line-height: 1.5;
-  font-weight: 400;
-  border-radius: 6px;
-  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
-  white-space: pre-wrap;
-  word-break: break-word;
-  pointer-events: none;
-}
-
 [data-theme="dark"] mark.note-anchor {
   border-bottom-color: #6ea8ff;
 }
@@ -1627,13 +1605,6 @@ mark.note-anchor[data-note-text]:focus-visible::after {
   background: rgba(110, 168, 255, 0.16);
 }
 
-[data-theme="dark"] mark.note-anchor[data-note-text]:hover::after,
-[data-theme="dark"] mark.note-anchor[data-note-text]:focus-visible::after {
-  background: #2a2a2e;
-  color: #f5f5f7;
-  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
-}
-
 .highlight-delete-btn {
   position: absolute;
   z-index: 104;