Hover over DT to R

Question

I have it DTinside Rmarkdown, and I would like the image to pop up when hovering over table data.

It works out for me, but it distorts datatable.

It increases the height of the table to fit the image. I tried to reduce row sizes with css, but with no luck.

This is RmarkdownI still:

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

Change your CSS to use display: noneinstead visibility: hiddenlike this:

  .imgTooltip {
      display: none;
}

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

, , , datatable , .

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