Making an HTML table with rows merged vertically and tooltips on hover

Publishing Your Results
4

I experimented a bit with different packages and what I initially wanted to do doesn't seem to be possible at the moment. Currently, gt is the package that gives the most flexibility and control for tooltips because we can inject whatever HTML we want in the table/cells.

E.g. to add tooltips in the category cells:

library(tidyverse)
library(gt)

make_tooltip <- function(x, text) {
  glue::glue('{x}<span class="td-tooltip">{text}</span>')
}

tibble(
  category = c("Foo", "Bar"),
  tooltip = c("A tooltip.", "Another one!"),
  x = 1:2,
  y = c("a", "b")
) |> 
  mutate(
    category = map(make_tooltip(category, tooltip), html)
  ) |> 
  select(-tooltip) |> 
  gt()

From there, it's very easy to style and trigger tooltips with CSS and/or JS. Unfortunately, gt doesn't support vertical merging of cells yet.

1 Like