在R中的DT上悬停的图像弹出窗口 [英] Image popup on hover in DT in R

问题描述

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

我所以这样做似乎工作，但它扭曲了 datatable 。

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

这是 Rmarkdown 我到目前为止：

  --- 
 title：Untitled 
作者：dimitris_ps
日期：2016年9月3日
输出：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）
库（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\/>我的stackoverflow头像< / a>， 
< a class = \ItemsTooltip\href = \http：//www.example.com\target = \_blank\>< img class = \imgTooltip\src = \https://i.stack.imgur.com/uSSEu.jpg\/>我的stackoverflow头像< / a>
），b = c （< a class = \ItemsTooltip\href = \http：//www.example.com\target = \_blank\>< img class = \ imgTooltip\src = \https://i.stack.imgur.com/uSSEu.jpg\/>我的stackoverflow头像< / a>，
< a class = \\ItemsTooltip\href = \http：//www.example.com\target = \_bla nk\>< img class = \imgTooltip\src = \https://i.stack.imgur.com/uSSEu.jpg\/>我的stackoverflow头像< / a> ;
）），.Names = c（a，b），row.names = c（NA，-2L），class =data.frame）
``` 
 
```{r} 
 datatable（df，escape = c（FALSE，FALSE））
```
  / pre> 
 
解决方案
更改CSS以使用 display：none 而不是 visibility：hidden  like so：
  .imgTooltip {
显示：无; 
} 
 
 .ItemsTooltip：hover .imgTooltip {
 display：block; 
} 
  
如果我这样做，我可能会使用 datatable 回调选项，而不是在单元格中渲染图像，但是我还需要再考虑一下。
 
 
 
编辑：这里是一个更清洁的版本使用 columnDefs  
  --- 
标题：无标题
作者：CG
日期：2016年9月6日
输出：
 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）
库（DT）
 
 df<  -  data.frame（stringsAsFactors = FALSE，
a = rep（my stackoverflow头像，2），
b = rep（my stackoverflow头像，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>; 
}'
）
））））
```
  
 
I  have a DT within a Rmarkdown and I would like an image to pop up when hovering over table data.

What i have so for seems to work but it distorts the datatable.

It increases the table rows height to fit the image. I have tried to reduce the row sizes via css but with no luck.

This is the Rmarkdown I have so far:
---
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 stackoverflow Avatar</a>", 
"<a class=\"ItemsTooltip\" href=\"http://www.example.com\" target=\"_blank\"><img class=\"imgTooltip\" src=\"https://i.stack.imgur.com/uSSEu.jpg\"/>my stackoverflow 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 stackoverflow Avatar</a>", 
"<a class=\"ItemsTooltip\" href=\"http://www.example.com\" target=\"_blank\"><img class=\"imgTooltip\" src=\"https://i.stack.imgur.com/uSSEu.jpg\"/>my stackoverflow Avatar</a>"
)), .Names = c("a", "b"), row.names = c(NA, -2L), class = "data.frame")
```

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

解决方案
Change your CSS to use display: none instead of visibility: hidden like so:
  .imgTooltip {
      display: none;
}

  .ItemsTooltip:hover .imgTooltip {
      display: block;
}
If I were doing this I would probably use the datatable callback option instead of rendering the images in the cells, but I'd have to think about it some more.

edit: Here is a cleaner version using 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 stackoverflow Avatar",2),
                 b = rep("my stackoverflow 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>";
    }'
    )
  ))))
```


                        
这篇关于在R中的DT上悬停的图像弹出窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！