[ON week experiment] Add tooltips to the nav #2222
Conversation
Add a new NavigationTooltip property to the navigation interface and implement it across all navigation item types. The tooltip automatically falls back to the description field if no explicit tooltip is provided. Key changes: - Add navigation_tooltip field to YAML frontmatter parser - Add NavigationTooltip property to INavigationItem interface - Implement NavigationTooltip in MarkdownFile with fallback logic - Replace double quotes with single quotes to prevent HTML attribute issues - Strip markdown formatting from tooltip text - Implement property in all navigation item classes (DocumentationGroup, FileNavigationItem, CrossLinkNavigationItem, OperationNavigationItem, LandingNavigationItem, ApiGroupingNavigationItem, EndpointNavigationItem) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Implement dynamic viewport-relative tooltip positioning using Tippy.js. Tooltips appear after a 500ms hover delay and are styled to match the site's design system with theme support. Key features: - Export initNavigationTooltips() for HTMX re-initialization support - Cleanup logic to destroy previous tooltip instances - Dynamic positioning to prevent viewport overflow - Accessibility: aria-label support and keyboard navigation - Theme-aware styling (light/dark mode) - Arrow indicator pointing to hovered element 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Resolved merge conflicts: - MarkdownFile.cs: Kept navigation tooltip fields from feature branch - Removed old Navigation classes that were refactored in main
Implements NavigationTooltip property across all navigation classes to integrate the tooltip feature with the refactored navigation system from main. Node navigation items delegate tooltips to their Index property, while leaf items get tooltips from their underlying Model.
🔍 Preview links for changed docs |
![github-code-quality[bot]](https://avatars.githubusercontent.com/u/9919?s=60&v=4){kind=small}
| if (!string.IsNullOrEmpty(NavigationTooltip)) | ||
| { | ||
| if (NavigationTooltip.AsSpan().ReplaceSubstitutions(subs, Collector, out var replacement)) | ||
| NavigationTooltip = replacement; | ||
| } |
|
@elastic/docs-engineering if you have any time to gander at this, lemme know if this is anywhere near viable 😄 totally understand if it's not worth the effort to refactor or whatever |
|
I'd also be curious what @itsalexcm thinks of this from a UX perspective. 🙂 |
|
Super neat @leemthompo ! Definitely viable IMO :) Do we need defaults if its not provided? We might want to back this with querying AI descriptions from our search service if not provided ? |
Good question @Mpdreamz, currently it just does nothing if there isn't a A related question is that this introduces a new frontmatter field,
I mean if you could do that, that would be amazing, but sounds complex 🚀 One vague ambition with this was that it would be a tangible incentive to adding descriptions to pages :) |
📹
🤖 Summary
Navigation Tooltips Feature Changes
Implementation Summary
Added
NavigationTooltipproperty across the navigation system to display hover tooltips for navigation items:NavigationTooltipproperty toIDocumentationFileinterfaceModel.NavigationTooltipIndex.NavigationTooltipnullFiles Modified
Core Implementation:
src/Elastic.Markdown/IO/MarkdownFile.cs- Tooltip logic using description from YAML frontmatter, strips markdown and escapes quotessrc/Elastic.Documentation.Navigation/IDocumentationFile.cs- AddedNavigationTooltipproperty to interfaceNavigation Classes (9 files):
src/Elastic.Documentation.Navigation/Assembler/SiteNavigation.cssrc/Elastic.Documentation.Navigation/Isolated/Leaf/CrossLinkNavigationLeaf.cssrc/Elastic.Documentation.Navigation/Isolated/Leaf/FileNavigationLeaf.cssrc/Elastic.Documentation.Navigation/Isolated/Node/DocumentationSetNavigation.cssrc/Elastic.Documentation.Navigation/Isolated/Node/FolderNavigation.cssrc/Elastic.Documentation.Navigation/Isolated/Node/TableOfContentsNavigation.cssrc/Elastic.Documentation.Navigation/Isolated/Node/VirtualFileNavigation.cssrc/Elastic.ApiExplorer/ApiIndexLeafNavigation.csFrontend:
src/Elastic.Documentation.Site/Assets/navigation-tooltip.ts- JavaScript implementationsrc/Elastic.Documentation.Site/Assets/navigation-tooltip.css- Tooltip stylingTests:
tests/Elastic.Markdown.Tests/Inline/ImagePathResolutionTests.cstests/Navigation.Tests/TestDocumentationSetContext.csIntegration
Successfully integrated with the refactored navigation system from main branch after merge conflict resolution.