如何在DT Table上将Shiny面板输出放置在鼠标指针附近？

方案1：鼠标跟随式动态提示 #

实现逻辑：通过少量内置JS监听鼠标位置与表格单元格悬停事件，将坐标和单元格信息同步到Shiny服务端，动态更新absolutePanel的内容与位置，无需复杂JS开发。

完整示例代码 #

library(shiny)
library(shinydashboard)
library(DT)
library(shinyjs)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
    useShinyjs(),
    # 鼠标跟随提示面板，初始隐藏
    absolutePanel(
      id = "hover_tip",
      top = 0, left = 0,
      width = "200px",
      style = "display: none; background: #fff; border: 1px solid #ccc; padding: 10px; border-radius: 4px; z-index: 1000;",
      uiOutput("tip_content")
    ),
    # DT表格输出
    DTOutput("data_table"),
    # 基础JS监听逻辑
    tags$script(HTML("
      // 监听鼠标移动，同步坐标到Shiny
      $(document).on('mousemove', function(e) {
        Shiny.setInputValue('mouse_x', e.pageX + 10); // 偏移10px避免挡住鼠标
        Shiny.setInputValue('mouse_y', e.pageY + 10);
      });
      // 监听表格单元格悬停
      $(document).on('mouseenter', '#data_table td', function() {
        let cell_index = $(this).index();
        let row_index = $(this).parent('tr').index();
        Shiny.setInputValue('hovered_cell', {row: row_index, col: cell_index});
        $('#hover_tip').show();
      });
      // 监听离开单元格事件
      $(document).on('mouseleave', '#data_table td', function() {
        $('#hover_tip').hide();
        Shiny.setInputValue('hovered_cell', null);
      });
    "))
  )
)

server <- function(input, output, session) {
  # 示例表格数据
  sample_data <- reactive({
    data.frame(
      商品名称 = paste0("商品", 1:20),
      销量 = sample(100:1000, 20),
      单价 = sample(10:100, 20)
    )
  })
  
  # 渲染DT表格
  output$data_table <- renderDT({
    datatable(sample_data(), selection = "none")
  })
  
  # 监听鼠标位置，更新提示面板位置
  observe({
    req(input$mouse_x, input$mouse_y)
    runjs(sprintf("$('#hover_tip').css({top: '%dpx', left: '%dpx'})", input$mouse_y, input$mouse_x))
  })
  
  # 动态生成提示内容
  output$tip_content <- renderUI({
    req(input$hovered_cell)
    row <- input$hovered_cell$row + 1 # JS索引从0开始，R从1开始
    col <- input$hovered_cell$col + 1
    df <- sample_data()
    # 可根据业务需求自定义提示内容
    tagList(
      p(strong(df[row, 1])),
      p(paste("销量：", df[row, 2])),
      p(paste("单价：", df[row, 3])),
      p(paste("销售额：", df[row,2] * df[row,3]))
    )
  })
}

shinyApp(ui, server)

注：如果不想引入shinyjs依赖，也可以直接把面板位置更新逻辑写在JS的mousemove事件中，效果完全一致

方案2：固定位置重叠提示面板 #

Shiny面板支持重叠展示，核心是将提示面板的z-index属性设置为大于表格的数值，保证面板浮在表格上层。你可以在表格上方预设2个固定位置的面板，根据悬停的单元格位置切换显示对应的内容即可，示例UI结构如下：

# 放在DTOutput之前即可保证层级在表格上方
absolutePanel(
  id = "tip_pos1",
  top = "10px", right = "10px",
  width = "200px",
  style = "display: none; background: #fff; border: 1px solid #ccc; padding: 10px; z-index: 1000;",
  uiOutput("tip1_content")
),
absolutePanel(
  id = "tip_pos2",
  top = "10px", left = "10px",
  width = "200px",
  style = "display: none; background: #fff; border: 1px solid #ccc; padding: 10px; z-index: 1000;",
  uiOutput("tip2_content")
),
DTOutput("data_table")

服务端只需要根据监听到的悬停单元格的位置，判断显示左侧还是右侧的面板，更新对应内容即可，无需处理鼠标坐标逻辑，稳定性更高。

内容的提问来源于stack exchange，提问作者nerrez