在可反应的整个单元格上悬停时显示工具提示

Question

我在 R 中有一个

reactable

，我想显示以某种颜色突出显示的列（在下面的示例中：黄色），并且悬停时每个单元格应显示一个自定义工具提示，该提示取决于隐藏的 (

show = FALSE

）栏目。

我已经设法使用解决方法来做到这一点。我需要用 HTML 不间断空格填充单元格，并将鼠标悬停在这些空格字符上时显示工具提示。

这不是最佳选择，因为我希望工具提示在整个单元格悬停时显示，而不仅仅是在位于单元格中心的空间悬停时显示。

这是我的设置：

 

这是我当前的解决方法：

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

我想，我可以在 

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

中使用

style

参数，并从 {tippy} 包中提供类似的函数，该函数不使用

colDef

作为参数，而是设置整个

text

的样式。不幸的是，这不起作用（见下文）。任何帮助表示赞赏！

div

Answer 1

必须在

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

的

with_tippy

参数中调用

cell

函数，并且需要设置

colDef

元素

div

，否则

height: 100%

将不会显示。然后我们必须删除单元格内容周围的

div

，我们可以通过在

padding

的

padding: 0

参数中设置

style

来实现此目的。colDef