Bild Popup auf Schwebeflug in DT in R

Question

Ich habe eine DT innerhalb einer Rmarkdown und ich möchte ein Bild, wenn Sie über Tabellendaten schweben.

Was ich habe so scheint zu arbeiten, aber es verzerrt die datatable.

Sie erhöht die Höhe der Tabellenzeilen, um sie an das Bild anzupassen. Ich habe versucht, die Zeilengrößen über css zu reduzieren, aber ohne Glück.

Dies ist die Rmarkdown Ich habe bisher:

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

ändern CSS display: none statt visibility: hidden wie so zu verwenden:

.imgTooltip { 
     display: none; 
} 

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

Wenn ich das ich wahrscheinlich die datatable verwenden würde taten Callback-Option statt die Bilder in den Zellen zu rendern, aber ich müsste darüber noch etwas nachdenken.

edit: Hier ist eine sauberere Version 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>"; 
    }' 
    ) 
)))) 
```