DTのホバー上の画像ポップアップR

Question

私はの中にRmarkdownを入れています。テーブルのデータをホバリングすると画像がポップアップします。

私はこれが効いているようですが、それはdatatableを歪ませます。

画像に合わせてテーブル行の高さを上げます。私はcss経由で行のサイズを減らそうとしましたが、運はありません。

これは私がこれまでしているRmarkdownです：私はおそらくdatatableを使用する

.imgTooltip { 
     display: none; 
} 

    .ItemsTooltip:hover .imgTooltip { 
     display: block; 
} 

私はこれをしていた場合は、次の

--- 
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)) 
``` 

Answer 1

が display: noneの代わりに、そのような visibility: hiddenを使用するようにCSSを変更

コールバックオプションを使用してセル内のイメージをレンダリングするのではなく、もう少し考える必要があります。

編集：ここでは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>"; 
    }' 
    ) 
)))) 
```