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

[arangaca]

I'd like to make a table in R markdown (outputting as html_vignette) that allows me to:

• merge cells vertically as shown in the image below (ideally):
  

  

• display tooltip text on hover in some cells. Typically, this means that I'd need to have an HTML structure as follows (note the <span></span> tags):

<table>
  <tr>
    <td class='tooltip_container'>
      Foo
      <span class="tooltip">some info to show on mouse over</span>
    </td>
    <td>Zip</td>
    <td>Zap</td>
    <td>Zop</td>
  </tr>
  ...

There're plenty of R packages to make tables in R markdown so I'd appreciate some advice on which one would suit me best for my use case.

gt is an obvious choice when it comes to making HTML tables but it's not possible to merge cells vertically at the moment. It's possible to group some cells in a column but it's not very flexible. I keep it as an option because I could probably be fine with merging cells in one column only if gt allows me to add tooltips.

flextable allows users to merge rows vertically. I don't know whether I can insert custom <spans> in cells though.

Any table expert around to give me some tips?

[scottyd22]

Hi @arangaca! The package I like to use for making tables is kableExtra. The example below uses the development version of the package, as the collapse_rows() function does not work properly in the CRAN version (from what I've experienced and researched). In the image, I am hovering over the 3 in column B.

library(kableExtra)

collapse_rows_dt <- data.frame(X = c(rep("foo", 5), rep("bar", 4)),
                               A = c(rep("a", 3), rep("b", 2), rep("c", 1), rep("d", 3)),
                               B = 1:9,
                               C = sample(c(0,1), 9, replace = TRUE),
                               D = sample(c(10,20), 9, replace = TRUE),
                               B_tooltip = c('Tip 1', '', 'Tip 2', rep('', 5), 'Last Tip')
                               )
  

kbl(collapse_rows_dt, 
    col.names = c('', 'A', 'B', 'C', 'D', ''),
    align = "c") |>
  kable_paper(full_width = F) |>
  column_spec(1, bold = T, ) |>
  column_spec(3, tooltip = collapse_rows_dt$B_tooltip) |>
  collapse_rows(columns = 1:2,  valign = 'middle') |>
  remove_column(6)

[arangaca]

Hi @scottyd22. Thanks a lot for the suggestion. I've used the CRAN version of kableExtra before which is quite limited for more advanced tables. I didn't know the dev version had so much more to offer. I really like the simplicity of this solution but there's one (major) drawback. Tooltip text is simply paste to the title attribute which means it's really not flexible. I was planning to style tooltip popups but I can't really do that from the title attribute (or I can but the native popup will also show up which I don't want).

I keep that solution in mind if there's no better alternatives. If there's a package that gives more flexibility with tooltips though, that would be awesome.

[arangaca]

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.