R中DT悬停时弹出图像

Posted 2023-05-07

【中文标题】R中DT悬停时弹出图像

【英文标题】：Image popup on hover in DT in R

【发布时间】：2017-01-11 13:21:14

【问题描述】：

我在Rmarkdown 中有一个DT，我希望将鼠标悬停在表格数据上时弹出一个图像。

我所拥有的似乎有效，但它扭曲了datatable。

它会增加表格行的高度以适合图像。我试图通过css 减少行大小，但没有运气。

这是我目前拥有的Rmarkdown：

---
title: "Untitled"
author: "dimitris_ps"
date: "3 September 2016"
output: html_document
---

<style type="text/css"> 

  .imgTooltip 
      visibility: hidden;


  .ItemsTooltip:hover .imgTooltip 
      visibility: visible;


  td 
      height: 14px;


</style>

```r setup, include=FALSE
knitr::opts_chunk$set(echo = TRUE)
library(DT)

df <- structure(list(a = c("<a class=\"ItemsTooltip\" href=\"http://www.example.com\" target=\"_blank\"><img class=\"imgTooltip\" src=\"https://i.stack.imgur.com/uSSEu.jpg\"/>my *** Avatar</a>", 
"<a class=\"ItemsTooltip\" href=\"http://www.example.com\" target=\"_blank\"><img class=\"imgTooltip\" src=\"https://i.stack.imgur.com/uSSEu.jpg\"/>my *** Avatar</a>"
), b = c("<a class=\"ItemsTooltip\" href=\"http://www.example.com\" target=\"_blank\"><img class=\"imgTooltip\" src=\"https://i.stack.imgur.com/uSSEu.jpg\"/>my *** Avatar</a>", 
"<a class=\"ItemsTooltip\" href=\"http://www.example.com\" target=\"_blank\"><img class=\"imgTooltip\" src=\"https://i.stack.imgur.com/uSSEu.jpg\"/>my *** Avatar</a>"
)), .Names = c("a", "b"), row.names = c(NA, -2L), class = "data.frame")
```

```r
datatable(df, escape=c(FALSE, FALSE))
```

【参考方案1】：

将您的 CSS 更改为使用 display: none 而不是 visibility: hidden，如下所示：

  .imgTooltip 
      display: none;


  .ItemsTooltip:hover .imgTooltip 
      display: block;

如果我这样做，我可能会使用 datatable 回调选项，而不是在单元格中渲染图像，但我必须考虑更多。

编辑：这是使用columnDefs的更简洁的版本

---
title: "Untitled"
author: "CG"
date: "6 September 2016"
output: 
  html_document:
    md_extensions: +raw_html
---

<style type="text/css"> 

.imgTooltip 
      display: none;


.ItemsTooltip:hover .imgTooltip 
      display: block;
      position: absolute;
      z-index: 1;


</style>

```r setup, include=FALSE
knitr::opts_chunk$set(echo = TRUE)
library(DT)

df <- data.frame(stringsAsFactors=FALSE,
                 a = rep("my *** Avatar",2),
                 b = rep("my *** Avatar",2))

```

```r
datatable(df, options=list(columnDefs=list(list(
  targets=1:2,render=DT::JS(
    'function(data,row,type,meta) 
      return "<a class=\'ItemsTooltip\' href=\'www.example.com\' target=\'_blank\'><img class=\'imgTooltip\' src=\'https://i.stack.imgur.com/uSSEu.jpg\'/>" +
      data + "</a>";
    '
    )
  ))))
```

【讨论】：

太好了，这就是我想要的。谢谢

如果我们想在每一行显示不同的图像，从 data.frame 的列中读取 url 怎么办？