Image popup on hover in DT in R

Question

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

Answer 1

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>";
    }'
    )
  ))))
```