如何在R Shiny表格的图片上实现悬停弹出气泡效果？

当前代码点击表格内的问号图片时，帮助文本会显示在屏幕底部且需手动关闭。需修改为：鼠标悬停问号时弹出气泡展示帮助文本，鼠标移开后气泡自动消失。

修改后的完整代码 #

library(magrittr)
library(htmlwidgets)
library(rhandsontable)
library(shiny)

DF = data.frame(
  Col_1 = c("This is row 1","This is row 2"), 
  Col_Help = c(
    "https://as1.ftcdn.net/v2/jpg/03/35/13/14/1000_F_335131435_DrHIQjlOKlu3GCXtpFkIG1v0cGgM9vJC.jpg",
    "https://as1.ftcdn.net/v2/jpg/03/35/13/14/1000_F_335131435_DrHIQjlOKlu3GCXtpFkIG1v0cGgM9vJC.jpg"
  ),
  text = c("Row 1 does xxx","Row 2 does yyy"),
  stringsAsFactors = FALSE
)

ui <- fluidPage(
  br(),
  # 定义气泡样式
  tags$style(HTML("
    .popup {
      position: absolute;
      background-color: #f9f9f9;
      border: 1px solid #ccc;
      padding: 8px 12px;
      border-radius: 4px;
      z-index: 1000;
      box-shadow: 0 2px 5px rgba(0,0,0,0.2);
      display: none;
    }
  ")),
  rHandsontableOutput('my_table')
)

server <- function(input, output, session) {
  output$my_table <- renderRHandsontable({
    rhandsontable::rhandsontable(
      DF,
      allowedTags = "<em><b><strong><a><big>"
    ) %>%
      hot_cols(colWidths = c(200, 80)) %>%
      hot_col(1, renderer = htmlwidgets::JS("safeHtmlRenderer")) %>%
      hot_col(2, renderer = "
        function(instance, td, row, col, prop, value, cellProperties) {
          var escaped = Handsontable.helper.stringify(value),
            img;
      
          if (escaped.indexOf('http') === 0) {
            img = document.createElement('IMG');
            img.src = value; 
            img.style.width = 'auto'; 
            img.style.height = '20px';
            img.title = '查看帮助';
      
            // 鼠标悬停时创建并显示气泡
            Handsontable.dom.addEvent(img, 'mouseover', function (e){
              var textBlock = instance.params.data[row][2];
              var popup = document.createElement('div');
              popup.className = 'popup';
              popup.id = 'help-popup-' + row; // 用行号区分气泡，避免冲突
              popup.innerHTML = '<center>' + textBlock + '</center>';
              
              // 设置气泡在鼠标右侧上方显示
              popup.style.left = (e.pageX + 10) + 'px';
              popup.style.top = (e.pageY - 10) + 'px';
              popup.style.display = 'block';
              
              document.body.appendChild(popup);
            });
      
            // 鼠标移开时移除气泡
            Handsontable.dom.addEvent(img, 'mouseout', function (e){
              var popup = document.getElementById('help-popup-' + row);
              if (popup) {
                popup.parentNode.removeChild(popup);
              }
            });
      
            Handsontable.dom.empty(td);
            td.appendChild(img);
            
          }
          else {
            Handsontable.renderers.TextRenderer.apply(this, arguments);
          }
          return td;
        }") %>% 
      hot_cols(colWidths = ifelse(names(DF) != "text", 100, 0.1))
  })
}

shinyApp(ui, server)

关键修改说明 #

• 添加气泡样式：在UI中嵌入CSS定义气泡的外观，包括背景、边框、阴影和绝对定位，确保气泡悬浮在页面最上层不被遮挡。
• 替换事件逻辑：将原有的点击触发改为mouseover悬停触发气泡创建，新增mouseout事件在鼠标离开时销毁气泡，实现自动显示/隐藏。
• 优化气泡位置：通过鼠标事件的pageX/pageY属性，将气泡定位在鼠标右侧上方，避免遮挡问号图片。
• 移除冗余元素：去掉原有的关闭按钮，因为气泡会随鼠标移开自动消失，简化交互流程。
• 唯一标识气泡：给每个气泡添加包含行号的ID，避免不同行的气泡互相干扰。

内容的提问来源于stack exchange，提问作者Village.Idyot