R语言中如何为DT::datatable实现行悬停时按行展示关联不同图片

• 基于DT列渲染回调的内置行数据参数，直接读取当前行对应列的图片URL，无需额外遍历DOM取数据
• 纯CSS实现悬停弹出逻辑，零额外JS开发量
• 支持通过CSS参数灵活自定义弹出图片的尺寸、位置、边框等样式

library(DT)

df <- data.frame(stringsAsFactors=FALSE,
                 a = rep("my stackoverflow Avatar",2),
                 b = rep("my stackoverflow Avatar",2),
                 url=c('https://d33wubrfki0l68.cloudfront.net/57299a1dcd979c623325f11bf5e5ce60f3d4eb00/e4602/wp-content/uploads/2018/10/black.png'
                       ,'https://d33wubrfki0l68.cloudfront.net/ca4b0ae74fce141fb92ede7117b1c1928478c441/98350/wp-content/uploads/2018/10/rstudio-logo-gray.png')
)

# 自定义样式：控制悬停弹层的显示逻辑和图片尺寸
custom_css <- "
.ItemsTooltip { position: relative; cursor: pointer; text-decoration: none; }
.imgTooltip {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 9999;
  border: 1px solid #eee;
  padding: 4px;
  background: #fff;
  /* 在此处调整弹出图片的显示尺寸 */
  width: 200px;
}
.ItemsTooltip:hover .imgTooltip {
  display: block;
}
"

datatable(
  df,
  # 注入自定义CSS
  style = list(
    highlights = "default",
    css = custom_css
  ),
  options=list(
    columnDefs=list(
      list(
        targets=0, # 列索引从0开始计数，0对应df第一列（a列），1对应第二列（b列）
        render=DT::JS(
          'function(data, type, row, meta) {
            // row为当前行的全部数据数组，url列为df第3列，对应索引为2
            const row_img_url = row[2];
            return "<a class=\'ItemsTooltip\' href=\'https://example.com\' target=\'_blank\'>" +
              "<img class=\'imgTooltip\' src=\'" + row_img_url + "\'/>" +
              data + "</a>";
          }'
        )
      )
    )
  )
)

• 行图片URL读取：列渲染回调函数的row参数为当前行所有列的数组，索引与df列顺序一一对应，直接将对应列的URL值拼接为img标签的src属性即可实现每行加载专属图片；如果url列位置调整，只需修改对应的数组索引值即可
• 图片尺寸自定义：在custom_css的.imgTooltip规则下，修改width、height属性即可调整弹出图片的显示大小
• 效果应用范围：通过targets参数指定需要添加悬停效果的列，无需逐行修改代码；如果需要与原测试代码保持一致、在df第二列（b列）启用效果，将targets参数值改为1即可

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