Show tooltip on hover of whole cell in reactable

Question

I have a reactable in R and I want to display a column that is highlighted in a certain color (in the example below: yellow) and on hover each cell should display a custom tooltip which depends on a hidden (show = FALSE) column.

I have managed to do this using a workaround. I need to fill in the cells with HTML non-breaking spaces   and on hover of those space characters the tooltip is displayed.

This is not optimal, since I want the tooltip to show on hover of the whole cell and not only on hover of the spaces which are located in the cell center.

Here is my setup:

library(shiny)
library(tippy)
library(reactable)
library(dplyr)


# Data
data <-  iris[1:5,] %>%
  mutate(Tooltip_display = "",
         Tooltip_column = paste0('Tooltip ', row_number(), '<br>This text is long and should <br> show up when hovering'))

This is my current workaround:

# Working
render.reactable.cell.with.tippy <- function(text, tooltip){
  div(
    style = "cursor: info;
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
            ",
    tippy(text = paste(rep("&nbsp;", 16), collapse = " "), tooltip = tooltip)
  )
}

reactable(data,
          columns = list(
            
            Tooltip_display = colDef(
              html = TRUE,
              cell =  function(value, index, name) {
                render.reactable.cell.with.tippy(text = value, tooltip = data[index,]$Tooltip_column)
                },
              style = list(background = "yellow")
            ),
            
            Tooltip_column = colDef(show = FALSE)
          ))

I thought, that I could use the style argument in colDef and supply a similar function from the {tippy} package which doesn't use text as argument but styles a whole div. Unfortunately, this is not working (see below).

Any help appreciated!

# Not working
render.reactable.cell.with.tippy <- function(tooltip){
  with_tippy(
    div(
      style = "cursor: info;
               white-space: nowrap;
               overflow: hidden;
               text-overflow: ellipsis;
               background: yellow;
              "),
    tooltip = tooltip
    )
}



reactable(data,
          columns = list(
            
            Tooltip_display = colDef(
              html = TRUE,
              style = function(value, index) {
                render.reactable.cell.with.tippy(tooltip = data[index,]$Tooltip_column) 
              }
            
            Tooltip_column = colDef(show = FALSE)
          ))

Answer 1

The with_tippy function has to be called in the cell argument of colDef and the div element needs to be set height: 100% otherwise the div won't be displayed. Then we have to remove the padding around the cell content and we can do this by setting padding: 0 in the style argument of colDef.

reactable(data,
          columns = list(
            
            Tooltip_display = colDef(
              html = TRUE,
              cell =  function(value, index, name) {
                    with_tippy(
                      div(
                        style = "cursor: info;
               white-space: nowrap;
               overflow: hidden;
               height: 100%;
               background: yellow;
              "),
              tooltip = data[index,]$Tooltip_column
                    )
              },
              style =

                 list(background = "yellow", padding = 0)
            ),
            
            Tooltip_column = colDef(show = FALSE)
          ))