javascript - 在每个单元格的Shiny数据表中显示工具提示或弹出框？

有什么方法可以为r Shiny中的数据表中的每个单元获取工具提示？获取悬停行或列的方法有很多。但是我找不到一种同时获取行索引和列索引并为每个单元格显示不同的悬停工具提示的方法。任何人都可以修改以下代码吗？

library(shiny)
library(DT)

shinyApp(
  ui = fluidPage(
    dataTableOutput('table'),
    verbatimTextOutput('hoverIndex'),
  ),

  server = function(server, input, output) {

    output$hoverIndex <- renderText({
      UI_out <- input$hoverIndexJS
      return(paste("hover column info", UI_out))
    })


    output$table <- renderDataTable({
      DT_out <- data.frame(`A` = 1:5, `B` = 11:15, `C` = LETTERS[1:5])
      DT_out <- datatable(DT_out
                          ,rownames = F
                          ,callback = JS("
                                         /* code for columns on hover */
                                         table.on('mouseenter', 'td', function() {
                                         var td = $(this);
                                         var col = table.cell( this ).index().columnVisible;
                                         var row = table.cell( this ).index().row;
                                         $('td[row][col]).attr('title', row+col);
                                         Shiny.onInputChange('hoverIndexJS', info_out);

                                         });"

                          )
                          )
      return(DT_out)
  })
    }
      )

最佳答案

完全有可能，但是您弄乱了callback代码。

那里有一个错字，使整个脚本失败了。此外，您必须知道回调应该返回表对象才能正常工作。如果您不这样做，桌子甚至都不会被绘制。

这是逻辑更轻的更正版本。

library(shiny)
library(DT)

shinyApp(
  ui = fluidPage(
    dataTableOutput('table'),
    verbatimTextOutput('hoverIndex')
  ),

  server = function(server, input, output) {

    output$hoverIndex <- renderText({
      paste("hover column info", input$hoverIndexJS)
    })

    output$table <- renderDataTable({
      datatable(data.frame(`A` = 1:5, `B` = 11:15, `C` = LETTERS[1:5]),
                rownames = F,
                callback = JS("
                  table.on('mouseenter', 'td', function() {
                    Shiny.onInputChange('hoverIndexJS', this.innerHTML);
                  });
                  return table;
                ")
      )
    })
  }
)

编辑

回答评论，下面是带有两个表的版本。
但这是一种廉价的方法。

library(shiny)
library(DT)

shinyApp(
  ui = fluidPage(
    dataTableOutput('tableWithHoverEffect'),
    dataTableOutput('tableWithHoverData')
  ),

  server = function(session, input, output) {

    observeEvent(input$hoveredCellInfo, {
      info <- input$hoveredCellInfo
      content <- as.character(table2[info$row, info$column])
    })

    table1 <- data.frame(A = 1:5, B = 11:15, C = LETTERS[1:5])
    table2 <- data.frame(D = 10:14, E = LETTERS[6:10], F = c(T, F, F, T, T))

    output$tableWithHoverEffect <- renderDataTable({
      datatable(table1, rownames = F,
                callback = JS("
                              table.on('mouseenter', 'tbody td', function() {
                                var column = $(this).index();
                                var row = $(this).parent().index();

                                var dataFromOtherTable = $('#tableWithHoverData').find('tbody tr').eq(row).find('td').eq(column).text();

                                this.setAttribute('title', dataFromOtherTable);
                              });

                              return table;
                              ")
                )
    })

    output$tableWithHoverData <- renderDataTable({
      datatable(table2, rownames = F)
    })
  }
)