From 5940eb7453e94897bb534d325fe96c7df96a7205 Mon Sep 17 00:00:00 2001
From: Kenneth Reitz <me@kennethreitz.org>
Date: Sat, 22 Nov 2025 15:23:10 -0500
Subject: [PATCH] Add hover tooltips to cross-references with verse previews
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Enhancement to cross-references feature:
- Fetch actual verse text for each cross-reference
- Display verse text in elegant hover tooltips
- Support both light and dark mode styling
- Add "(hover to preview)" hint to section description
- Tooltips show reference and full verse text
- Clean, minimal design matching Tufte CSS aesthetic

This makes it much easier to explore related verses without
leaving the current page.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 kjvstudy_org/cross_references.py  | 47 +++++++++++++++++++++--
 kjvstudy_org/templates/verse.html | 63 ++++++++++++++++++++++++++++++-
 2 files changed, 105 insertions(+), 5 deletions(-)

diff --git a/kjvstudy_org/cross_references.py b/kjvstudy_org/cross_references.py
index fe17734..9253b8d 100644
--- a/kjvstudy_org/cross_references.py
+++ b/kjvstudy_org/cross_references.py
@@ -1175,7 +1175,7 @@ CROSS_REFERENCES = {
 
 def get_cross_references(book: str, chapter: int, verse: int) -> list:
     """
-    Get cross-references for a specific verse.
+    Get cross-references for a specific verse with verse text for tooltips.
 
     Args:
         book: Book name (e.g., "Genesis", "John")
@@ -1183,10 +1183,51 @@ def get_cross_references(book: str, chapter: int, verse: int) -> list:
         verse: Verse number
 
     Returns:
-        List of cross-reference dictionaries with 'ref' and 'note' keys
+        List of cross-reference dictionaries with 'ref', 'note', and 'text' keys
     """
+    from .bible_data import bible_data
+
     key = f"{book}:{chapter}:{verse}"
-    return CROSS_REFERENCES.get(key, [])
+    refs = CROSS_REFERENCES.get(key, [])
+
+    # Enhance each reference with the actual verse text
+    enhanced_refs = []
+    for ref in refs:
+        enhanced_ref = ref.copy()
+
+        # Parse the reference to get the verse text
+        ref_str = ref['ref']
+        parts = ref_str.rsplit(' ', 1)
+        if len(parts) == 2:
+            ref_book = parts[0]
+            chapter_verse = parts[1]
+
+            if ':' in chapter_verse:
+                ref_chapter, ref_verse = chapter_verse.split(':')
+                ref_chapter = int(ref_chapter)
+                ref_verse = int(ref_verse)
+
+                # Get the verse text from bible_data
+                if ref_book in bible_data:
+                    book_data = bible_data[ref_book]
+                    if ref_chapter <= len(book_data):
+                        verses = book_data[ref_chapter - 1]
+                        if ref_verse <= len(verses):
+                            enhanced_ref['text'] = verses[ref_verse - 1].text
+                        else:
+                            enhanced_ref['text'] = ""
+                    else:
+                        enhanced_ref['text'] = ""
+                else:
+                    enhanced_ref['text'] = ""
+            else:
+                enhanced_ref['text'] = ""
+        else:
+            enhanced_ref['text'] = ""
+
+        enhanced_refs.append(enhanced_ref)
+
+    return enhanced_refs
 
 
 def parse_reference(ref: str) -> dict:
diff --git a/kjvstudy_org/templates/verse.html b/kjvstudy_org/templates/verse.html
index 4bb31f0..17470c9 100644
--- a/kjvstudy_org/templates/verse.html
+++ b/kjvstudy_org/templates/verse.html
@@ -89,6 +89,57 @@
     color: white;
     border-color: #28a745;
 }
+
+/* Cross-reference tooltip styles */
+.cross-ref-link {
+    position: relative;
+    cursor: help;
+}
+
+.cross-ref-tooltip {
+    display: none;
+    position: absolute;
+    bottom: 100%;
+    left: 0;
+    min-width: 300px;
+    max-width: 400px;
+    padding: 0.75rem 1rem;
+    margin-bottom: 0.5rem;
+    background: var(--bg-color);
+    border: 1px solid var(--border-color-darker);
+    border-radius: 6px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    z-index: 1000;
+    font-size: 0.9rem;
+    line-height: 1.6;
+    color: var(--text-color);
+}
+
+.cross-ref-link:hover .cross-ref-tooltip {
+    display: block;
+}
+
+.tooltip-verse-text {
+    font-style: italic;
+    color: var(--text-secondary);
+    margin-top: 0.5rem;
+    padding-top: 0.5rem;
+    border-top: 1px solid var(--border-color);
+}
+
+[data-theme="dark"] .cross-ref-tooltip {
+    background: #2a2a2a;
+    border-color: #444;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+}
+
+@media (prefers-color-scheme: dark) {
+    .cross-ref-tooltip {
+        background: #2a2a2a;
+        border-color: #444;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+    }
+}
 </style>
 {% endblock %}
 
@@ -156,7 +207,7 @@
 {% if cross_references %}
 <section>
     <h2>Cross References</h2>
-    <p>Related verses that illuminate this passage:</p>
+    <p>Related verses that illuminate this passage (hover to preview):</p>
     <ul style="max-width: 60%; list-style: none; padding: 0;">
         {% for ref in cross_references %}
         <li style="margin: 1rem 0; padding-left: 1.5rem; border-left: 2px solid var(--border-color-dark);">
@@ -167,7 +218,15 @@
                 {% if ':' in chapter_verse %}
                     {% set ch = chapter_verse.split(':')[0] %}
                     {% set v = chapter_verse.split(':')[1] %}
-                    <strong><a href="/book/{{ book_name }}/chapter/{{ ch }}/verse/{{ v }}">{{ ref.ref }}</a></strong>
+                    <strong><a href="/book/{{ book_name }}/chapter/{{ ch }}/verse/{{ v }}" class="cross-ref-link">
+                        {{ ref.ref }}
+                        {% if ref.text %}
+                        <span class="cross-ref-tooltip">
+                            <strong>{{ ref.ref }}</strong>
+                            <div class="tooltip-verse-text">{{ ref.text }}</div>
+                        </span>
+                        {% endif %}
+                    </a></strong>
                 {% else %}
                     <strong>{{ ref.ref }}</strong>
                 {% endif %}