javascript - R reactable _如何截断单元格内容并在悬停时显示？

Question

我在表格中有一些长文本，我将其显示为可反应的。我希望长文本被截断，并且仅在悬停在其顶部时出现。到目前为止，我已经设法截断单元格中的文本，但我无法使悬停工作。有什么帮助吗？

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

使用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)}
                  )
                ))