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)
          ))

TimTeaFan · Accepted Answer · 2022-09-29T06:26:13.870

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)
          ))

For some reason when I use this solution it slows down my shiny app like a crazy amount. Any idea why that is? There are a little over 3,000 rows. In addition, the contents don't show up just the tooltip. o_O. — ethan tenison, Dec 10 '22 at 19:12
@ethantenison: Regarding speed I cannot really help you, since my own use cases have less than 100 rows and there is no speed issue there. However, my solution above runs sometimes into trouble not displaying the tooltip and I haven't figured out yet why this is happening. If you can create a minimal example for your problem and post it as a question I gladly give it a look. — TimTeaFan, Dec 10 '22 at 20:59

Show tooltip on hover of whole cell in reactable

1 Answers1