Image Popup on Hover in Dt in R

Image popup on hover in DT in R

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

How to display a scaled up image in an popup window on mouse hover or on click event on an image displayed in a rhandsontable cell in RShiny?

Here goes a solution that will center an element (image or graph) on-click event in the viewport - the browser window.

Please note for small changes (for better image display): _SL500_.jpg and img.style.width = 'auto';.

library(magrittr)
library(htmlwidgets)
library(rhandsontable)

DF = data.frame(
  comments = c(
    "I would rate it ★★★★☆",
    "This is the book about JavaScript"
  ), 
  cover = c(
    "http://ecx.images-amazon.com/images/I/51bRhyVTVGL._SL500_.jpg",
    "http://ecx.images-amazon.com/images/I/51gdVAEfPUL._SL500_.jpg"
 ),
 stringsAsFactors = FALSE
)

rhandsontable::rhandsontable(DF, allowedTags = "<em><b><strong><a><big>", 
callback = htmlwidgets::JS(

"$(document).ready(function() {
    $('body').prepend('<div class=\"zoomDiv\"><img src=\"\" class=\"zoomImg\"></div>');
    // onClick function for all plots (img's)
    $('img:not(.zoomImg)').click(function() {
      $('.zoomImg').attr('src', $(this).attr('src')).css({width: '100%'});
      $('.zoomDiv').css({opacity: '1', width: 'auto', border: '1px solid white', borderRadius: '5px', position: 'fixed', top: '50%', left: '50%', marginRight: '-50%', transform: 'translate(-50%, -50%)', boxShadow: '0px 0px 50px #888888', zIndex: '50', overflow: 'auto', maxHeight: '100%'});
    });
    // onClick function for zoomImg
    $('img.zoomImg').click(function() {
      $('.zoomDiv').css({opacity: '0', width: '0%'}); 
    });
  });"

),
              width = 800, height = 450, rowHeaders = FALSE) %>%
  hot_cols(colWidths = c(200, 80)) %>%
  hot_col(1, renderer = htmlwidgets::JS("safeHtmlRenderer")) %>%
  hot_col(2, renderer = "
    function(instance, td, row, col, prop, value, cellProperties) {
      var escaped = Handsontable.helper.stringify(value),
        img;
  
      if (escaped.indexOf('http') === 0) {
        img = document.createElement('IMG');
        img.src = value; img.style.width = 'auto'; img.style.height = '80px';
  
        Handsontable.dom.addEvent(img, 'mousedown', function (e){
          e.preventDefault(); // prevent selection quirk
        });
  
        Handsontable.dom.empty(td);
        td.appendChild(img);
      }
      else {
        // render as text
        Handsontable.renderers.TextRenderer.apply(this, arguments);
      }
  
      return td;
    }")

Output:

Add popover containing image in a table - Shiny

This doesnt exactly do what you asked, but it increases the size of the picture by hovering over it. So its not a real popover, just some css transformation.

server.R

server <- function(input, output) {
  output$example_table <- renderDataTable({
    img_dt},
    escape = FALSE,
    callback=JS(
      'table.on("mouseover","tr", function() {
      $(".small-img").hover(function(){
          $(this).css("transform", "scale(3, 3)");
        }, function(){
              $(this).css("transform", "none");
        });
      })'    
    ))
}

how to popup the rowname while hovering the cell

library(DT)

datatable(
  mtcars,
  options = list(
    rowCallback = JS(
      "function(row, data, displayNum, displayIndex, dataIndex) {",
      "  var rowName = data[0];",
      "  $(row).find('td').attr('title', rowName);",
      "}")
  )
)

Pop up message when clicked on icon on column headers

Since you mention in your comment that you’d like the contents of the
message to also be clickable, you might be interested in Bootstrap
Popovers. The
shinyBS package provides some wrappers for them. However, I couldn’t get
it to work with a datatable header, so I made some custom helpers:

# Enable popovers -- needs to be included again with dynamic content
usePopover <- function() {
  tags$script(HTML(
    "$(function () {
      $('[data-toggle=\"popover\"]').popover()
    })"
  ))
}

popover <- function(tag, content = NULL, title = NULL, options = list()) {
  if (!is.null(names(options))) {
    names(options) <- paste0("data-", names(options))
  }
  
  tag |>
    tagAppendAttributes(
      `data-toggle` = "popover",
      `data-content` = content,
      title = title,
      !!!options
    )
}

You can use these in a datatable column header by defining a custom
columDefs element for the target column. While we’re there, we can also use
the same mechanism to inject the info icon, after making sure to include the
required dependency in the UI.

Avoiding the sorting behaviour when clicking on the icon in the header takes some extra work. Essentially, you have to make sure the click event doesn't bubble up to the event listeners in the datatable. For the icon, that can be done with JavaScript in a direct click handler on the element. For the popover itself, we can use a different container (body, in this case) so that it's no longer included inside the table in the DOM.

Here’s how this comes together:

library(shiny)
library(DT)

ui <- fluidPage(
  # Need to add FontAwesome manually because no `icon()` calls in UI.
  fontawesome::fa_html_dependency(),
  DTOutput("table")
)

server <- function(input, output, session) {
  output$table <- renderDT({
    datatable(
      data = iris,
      options = list(
        columnDefs = list(
          list(
            targets = 4,
            title = paste(
              "Petal.Width",
              icon("info-circle") |>
                popover(
                  tags$a(href = "https://stackoverflow.com", "Stack Overflow"),
                  # Prevent sorting when clicking on popover
                  options = list(html = TRUE, container = "body")
                ) |>
                tagAppendAttributes(
                  # Prevent sorting when clicking on icon
                  onclick = "event.stopPropagation();"
                ) |>
                tagList(usePopover())
            )
          )
        )
      )
    )
  })
}

shinyApp(ui, server)

And it ends up looking something like this:

R Shiny: Mouse Hover Text for Datatable Rows

Here you go:

library(shiny)
library(DT)

shinyApp(
    ui = fluidPage(
        DT::dataTableOutput("table")
    ),
    server = function(input, output) {

        output$table <- DT::renderDataTable({
            DT::datatable(iris, rownames = FALSE,
                          options = list(rowCallback = JS(
            "function(row, data) {",
            "var full_text = 'This rows values are :' + data[0] + ',' + data[1] + '...'",
            "$('td', row).attr('title', full_text);",
            "}")))
        })
    }
)

---

Related Topics