R reactable _ how to truncate cell content and display upon hovering?

Question

I have some long text in a table that I display as a reactable. I would like the long text to be truncated, and only appear when hovering on top of it. So far, I have managed to truncate the text in the cells, but I cannot make the hovering to work. Any help?

library(reactable)
library(tidyverse)

reactable(
      iris[1:5, ] %>% mutate(Species = 'This text is long and should only show up entirely when hovering'),
      columns = list(
        Species = colDef(
          html = TRUE,
          style = "
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          hover: visible")
          )
        )```

Answer 1

A workaround using tippy:

library(shiny)
library(tippy)
library(reactable)
library(tidyverse)

render.reactable.cell.with.tippy <- function(text, tooltip){
  div(
    style = "text-decoration: underline;
                text-decoration-style: dotted;
                text-decoration-color: #FF6B00;
                cursor: info;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;",
    tippy(text = text, tooltip = tooltip)
  )
}

data <-  iris[1:5,] %>%
        mutate(Species = 'This text is long and should only show up entirely when hovering') %>%
        select(Species, everything())
      
      reactable(data,
                columns = list(
                  Species = colDef(
                    html = TRUE,
                    cell =  function(value, index, name) {
                      render.reactable.cell.with.tippy(text = value, tooltip = value)}
                  )
                ))