Изображение всплывающее на hover в DT в R

Question

У меня есть DT в пределах Rmarkdown, и я хотел бы, чтобы изображение всплывало при зависании над данными таблицы.

У меня есть так, похоже, работает, но он искажает 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 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

Изменить 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 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>"; 
    }' 
    ) 
)))) 
```