Hovering Annotations

Examples and Features

Boxes with Arrows

Use arrows to point from annotation boxes to specific elements on your slides.

This is important content that needs explanation.

Not much of an explanation, really.
Place the annotation box in a specific location by setting box-x and box-y coordinates.
Arrows point to the location set by head-x and head-y coordinates.

Boxes Without Arrows

Omit head-x and head-y to create floating notes without arrows.

Some content that doesn’t need precise pointing.

This is a general note that doesn’t point to anything specific. Perfect for commentary or reminders.

Highlighting with Marks

Combine annotations with highlighted text using Quarto’s .mark-spans or the {{ < mark > }} shortcode and the same brand colors.

The extension integrates with Quarto’s brand color system.

Visually connect annotations to specific text or elements.

Boxes with Mark Indicators

Or place semi-transparent markers freely anywhere on the slide to highlight specific points.

The circular marker shows exactly where you’re pointing. Customize size and opacity.

Customization Options

  • Colors: Use brand colors (1-9) or hex codes
  • Sizing: Control annotation-width, mark-width, mark-height
  • Opacity: Adjust mark-opacity (0-1)
  • Animation: Set fragment="false" to disable reveal animation
  • Positioning: All positions use viewport percentages (0-100)
See the README for complete documentation of all parameters.