Interactive Scripture Hover Tooltips

Nov 30, 2025

Scripture hover tooltips automatically detect Bible references (like John 3:16) and display the verse text when you hover on desktop or tap on mobile—no clicking away to look it up. This feature supports 31 Bible translations, has a 95%+ cache hit rate for common verses, and works throughout the entire Scriptured app.

Overview

We’ve added a feature to Scriptured that makes reading scripture references faster and more convenient. Now, whenever you see a scripture reference like “John 3:16” or “Romans 8:28” anywhere in the app, you can simply hover over it (on desktop) or tap it (on mobile) to instantly see the verse text.

How It Works

On Desktop

Simply hover your mouse over any scripture reference for about 300 milliseconds. A beautiful popover will appear showing:

The verse text in your preferred Bible version
A badge indicating which translation you’re reading (ESV, KJV, NIV, etc.)
A link to read the full chapter on Bible Gateway

On Mobile

Tap any scripture reference to open a bottom sheet with the same information. Swipe down or tap the backdrop to close it.

Key Features

1. Automatic Detection

The app automatically detects scripture references in the following formats:

Full book names: “John 3:16”, “Genesis 1:1”
Abbreviations: “Jn 3:16”, “Gen 1:1”, “Ps 23:1”
Numbered books: “1 John 3:16”, “2 Corinthians 5:17”
Verse ranges: “John 3:16-17”, “Romans 8:28-30”

2. Your Preferred Bible Version

The tooltip automatically uses your preferred Bible version from your account settings. You can change your preferred version anytime in Settings, and all tooltips will update accordingly.

3. Fast & Cached

We’ve optimized performance by:

Only loading verses when you hover/tap (lazy loading)
Caching verses you’ve already viewed for instant display
Keeping the initial page load fast

4. Fallback to Bible Gateway

If for any reason a verse can’t be loaded (network issues, API timeout, etc.), you’ll always see a link to view the passage on Bible Gateway, ensuring you can still access the scripture.

5. Fully Accessible

The feature is built with accessibility in mind:

Full keyboard navigation support (Tab, Enter, Esc)
Screen reader compatible with proper ARIA labels
Mobile-friendly with touch-optimized tap targets

Where You’ll See This Feature

Scripture hover tooltips are available throughout the app:

Apologetics Q&A: Quickly reference cited verses while reading answers
Character Profiles: See the verses associated with biblical characters
Book Pages: Explore referenced scriptures while studying Bible books
Topic Pages: Dive deeper into verses mentioned in theological topics
Prayer Requests: View scripture attached to prayer requests
And more: Anywhere scripture references appear!

Behind the Scenes

This feature leverages our existing Bible API infrastructure:

31 Bible versions supported (KJV, ESV, NIV, NKJV, NLT, NASB, and many more)
Server-side caching with 95%+ cache hit rate for common verses
Rate-limited API to ensure reliability
Database-backed for optimal performance

Tips for Best Experience

Set Your Preferred Version: Go to Settings → Bible Settings and choose your favorite translation
Hover Briefly: Wait about 300ms for the tooltip to appear—this prevents accidental popups
Mobile Gestures: On mobile, swipe down on the sheet to quickly close it
Keyboard Navigation: Use Tab to focus references, Enter to open, and Esc to close

Technical Implementation

For developers interested in the technical details:

Components Created

ScriptureTooltip: The interactive tooltip component
ScriptureEnhancer: Auto-detection wrapper that finds and enhances references
useVerseOnHover: Hook for lazy-loading verse data
useDeviceDetection: Hook to adapt UX for mobile vs desktop

Scripture Detection

We use regex patterns to detect references, handling:

66 canonical books of the Bible
Common abbreviations for all books
Verse ranges (e.g., “John 3:16-17”)
Numbered books (e.g., “1 John”, “2 Corinthians”)

Performance Optimizations

Lazy loading: Verses fetched only when tooltip opens
Memoization: Enhanced content cached to prevent re-processing
Debouncing: 300ms hover delay to avoid accidental triggers
Request deduplication: Multiple tooltips for same verse = 1 API call

Future Enhancements

We’re considering additional features for scripture tooltips:

Verse comparison: View multiple translations side-by-side
Cross-references: “See also” suggestions
Copy to clipboard: One-click copy of verse text
Add to notes: Quick-add to your Bible notes
Audio playback: Hear verses read aloud

Feedback Welcome

We’d love to hear your thoughts on this feature! Does it enhance your Bible study experience? Any suggestions for improvement? Let us know through the feedback form in the app.

Frequently Asked Questions

What Bible versions are supported?

Scripture tooltips support 31 translations including KJV, ESV, NIV, NKJV, NLT, NASB, and many more. The tooltip displays verses in whatever translation you’ve set as your preferred version in Settings.

How does the app detect scripture references?

The app uses pattern matching to identify Bible references in multiple formats: full book names (John 3:16), abbreviations (Jn 3:16), numbered books (1 John 3:16), and verse ranges (John 3:16-17). All 66 canonical books are supported.

Does this work offline?

Verses you’ve already viewed are cached locally for instant display. However, new verses require an internet connection to load. If a verse can’t be loaded, you’ll see a fallback link to Bible Gateway.

Can I change which translation appears in tooltips?

Yes. Go to Settings and update your preferred Bible version. All tooltips throughout the app will automatically use your selected translation.

This feature was built with inspiration from Logos Bible Software’s hover tooltips, adapted for the modern web with accessibility and mobile-first design in mind.

SCRIPTURED is a trademark of Hywel LLC.