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

Question

我在 R 中有一个 reactable，我想显示一个以特定颜色突出显示的列（在下面的示例中：黄色）并且在悬停时每个单元格应显示一个自定义工具提示，这取决于一个隐藏的 (show = FALSE) 列。

我已经设法使用变通方法做到了这一点。我需要用 HTML 不间断 spaces   填充单元格，并在悬停这些 space 字符时显示工具提示。

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

这是我的设置：

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

我想，我可以在 colDef 中使用 style 参数，并从 {tippy} 包中提供一个类似的函数，它不使用 text 作为参数，而是使用样式一个整体div。不幸的是，这不起作用（见下文）。

感谢任何帮助！

# 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

必须在 colDef 的 cell 参数中调用 with_tippy 函数并且需要设置 div 元素 height: 100% 否则 div 不会显示。然后我们必须删除单元格内容周围的 padding，我们可以通过在 colDef.

的 style 参数中设置 padding: 0 来完成此操作

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

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

Show tooltip on hover of whole cell in reactable

r

reactable