Hover Note Component Example
This guide demonstrates how to use the HoverNote component to add interactive hover notes to your documentation.
What is a Hover Note?
Section titled “What is a Hover Note?”A hover note is a highlighted text element that displays additional information when the user hovers their mouse over it. This is useful for providing supplementary context without cluttering the main content.
Basic Usage
Section titled “Basic Usage”Simple Text (via Prop)
Section titled “Simple Text (via Prop)”For simple text without complex formatting, you can use the content prop.
Hover over this text
This is a simple hover note with plain text.MDX Content (via Slot)
Section titled “MDX Content (via Slot)”For rich content including math, code blocks, or lists, use the note slot. This leverages Starlight’s full rendering engine.
Hover for a mathematical formula
The fundamental theorem of calculus:
Complex Formatting
Section titled “Complex Formatting”You can include almost anything inside a hover note:
Hover for code and lists
Features:
Section titled “Features:”- Interactive tooltips
- MDX support
- Starlight integration
console.log('Hover notes are cool!');Best Practices
Section titled “Best Practices”- Keep content concise: Hover notes should provide quick additional context.
- Use clear labels: Make it obvious what type of information is in the note.
- Don’t overuse: Only add hover notes where they provide real value.
- Consider mobile users: Hover notes may require a tap on touch devices.