Examples

The source behind the deck.

Annotated code blocks as the plugin steps through them, with the source for each.

The preview deck is built by this site. This page is the source behind it.

Annotations as fragments

```r
library(dplyr)                          # <1>
starwars |>                             # <2>
  filter(species == "Droid") |>         # <3>
  select(name, height, mass)            # <4>
```

1. Load the package.
2. Start from the dataset.
3. Keep the droids.
4. Keep three columns.

Each annotation is a fragment, so the arrow keys reveal them one at a time with their tooltips. This is the first slide of the deck, which is the only way to see it: the stepping is the point.

With line highlighting

```{.r code-line-numbers="1|2-3|4"}
library(dplyr)                          # <1>
starwars |>                             # <2>
  filter(species == "Droid") |>         # <3>
  select(name, height, mass)            # <4>
```

The annotations follow the highlighted lines, so one press moves the highlight and shows the note that goes with it.

Choosing when each appears

```{.r code-annotation-fragment-indices="2,4,6"}
```

The annotations then appear at fragment indices two, four, and six rather than in sequence, which is how they are interleaved with other fragments on the slide.

```{.r code-line-numbers="1|2|3" code-line-fragment-indices="0,2,4,6"}
```

code-line-fragment-indices does the same for the highlight steps, counting the unhighlighted code as step zero.

A token that is not a number writes a console warning and leaves that slot alone, and so does a list whose length does not match the number of annotations or steps.

The deck has a slide for this: the paragraphs and the annotations arrive alternately rather than in two runs.

The tooltip overflow fix

A tooltip inside a container that clips its overflow is cut off. The plugin walks up from the annotation marker to the slide, and if anything on the way sets overflow: hidden it moves the tooltip to the slide instead. When nothing clips, Quarto’s own placement is left alone, so a ::: {.columns} layout keeps its natural anchor.

This is on by default and there is nothing to write.

A callback

on-annotation-shown is a JavaScript function run after each tooltip is shown, receiving the anchor, the slide, the target cell, the target annotation, and the tippy instance. An exception it throws is written to the console rather than stopping the navigation.

Important

on-annotation-shown, enabled, and patch-tooltip-overflow are read from the deck configuration, and nothing populates it for this extension. See the Reference.

Source

The repository ships a short, standalone starting point you can copy: example.qmd.

Back to top