Include a pop-up with an image within a table - Shiny

I have a situation where I need to display images and metrics in a compact table. The challenge is to show the images in a small size within the table, but allow users to hover over them for a larger view using a popover feature.

While I managed to resize the images in the table to 75px width, I'm struggling to implement the popover functionality with shiny. Any advice or guidance on how to achieve this would be greatly appreciated!

Below is a simplified example of the table:

library(shiny)
library(shinydashboard)
library(DT)

# Data ------------------------------------------------------------------
dt <- data.frame(rank = c(1, 2, 3, 4, 5), 
             image_url = c('https://images.unsplash.com/photo-1521671413015-ce2b0103c8c7?ixlib=rb-0.3.5&s=45547f67f01ffdcad0e33c8417b840a9&auto=format&fit=crop&w=667&q=80', 
                           "https://images.unsplash.com/photo-1520699697851-3dc68aa3a474?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=ef15aee8bcb3f5928e5b31347adb6173&auto=format&fit=crop&w=400&q=80", 
                           "https://images.unsplash.com/photo-1501925873391-c3cd73416c5b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=379e4a0fffc6d11cd5794806681d0211&auto=format&fit=crop&w=750&q=80", 
                           <br>
                           "https://images.unsplash.com/photo-1493019352063-500af484329e?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f1e0ce442afdcaf2cdc4fde83012346e&auto=format&fit=crop&w=750&q=80", 
                           "https://images.unsplash.com/photo-1422056551295-3b38e8a20462?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=3eb1f67f2b9c1c26435fc584a0a1f75d&auto=format&fit=crop&w=667&q=80")
             )

img_dt <- dt %>%;
  mutate(img = paste0("<img class = small-img src='", image_url, "'/>")) 

# Dashboard ----------------------------------------------------------------
ui <- dashboardPage(
  dashboardHeader(title = "Test"),

  dashboardSidebar(),

  dashboardBody(
    tags$head(
      tags$style(
        HTML(
        "img.small-img {
        max-width: 75px;
        }")
      )
    ),

    dataTableOutput("example_table")
    )
  )

server <- function(input, output) {
  output$example_table <- renderDataTable({
  img_dt}, 
  escape = FALSE)
  }

shinyApp(ui = ui, server = server)
javascriptrshinypopovershinydashboard

Answer №1

This solution doesn't follow your initial request precisely, but it achieves the desired effect by enlarging the image upon hovering over it. While it's not a traditional popover, it utilizes CSS transformations to achieve similar results.

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Remove HTML tags from a table cell containing a combination of radio buttons and labels

Javascript Function: My JavaScript function posted below is designed to iterate through the column indexes specified in the 2nd parameter and also iterate through the element ids provided in the 3rd parameter. It will then populate the textbox, radiobutto ...

javascriptc#jqueryhtmlasp.net

Finding the console path in node.js

I'm currently developing a console application for node.js and I could use some guidance. When users install my console app using 'npm', they should be able to call it by typing 'program'. However, if the console is located at C:/U ...

javascriptnode.jsnpm

JavaScript Lint Warning: Avoid declaring functions inside a loop - unfortunately, there is no way to bypass this issue

In my React JS code snippet, I am attempting to search for a value within an object called 'categories' and then add the corresponding key-value pair into a new map named sortedCategories. var categoriesToSort = []; //categoriesToSort contains ...

javascriptnode.jsreactjsjslint

Is it possible to include more than one ng-app directive on a single HTML page in AngularJS?

When working with Angular JS, I've noticed that I only get the desired output if I remove either the ng-app directive for demo1 or the models. It seems like having two ng-app directives active at the same time causes issues. As a beginner in Angular J ...

javascriptangularjs

Error in Heroku deployment - Express and React app displaying a white screen

I am encountering a challenging situation as I attempt to understand the issue at hand. Following the deployment of my React/Express application on Heroku, the build and deployment proceed without errors, but the React frontend appears blank. The browser ...

javascriptnode.jsreactjsexpressheroku

What is the method for accessing the locale and messages of the IntlProvider within a component?

My index.js file includes the following code: import trFi from './translations/fi_FI.json'; import trSv from './translations/sv_SE.json'; ReactDOM.render( <IntlProvider locale={my_locale} messages={{ fi: trFi, sv: trSv } ...

javascriptjsonreactjsreact-intl

Error: JSON parsing stopped due to unexpected end of file while attempting to parse data

After testing with other APIs successfully, I found that this particular one is not functioning as expected. const express = require("express"); const https = require("https"); const bodyParser = require("body-parser"); const ...

javascriptnode.jsapiexpresshttps

Utilizing AJAX and JavaScript to create a countdown timer for a targeted HTML element

Here's a question broken down into two parts: I am looking to incorporate some JavaScript that triggers the #refresh function in order to display a count-up timer in text format. This timer should start at 0 seconds and run up to 3 minutes before ref ...

javascripthtmlajaxjquery

JavaScript array remains unchanged

I have a sample of JSON data saved in the "data" variable. Here is the FORMAT : { "0" : {"names":"Pooja, Trivedi"}, "1" : {"names":"Pooja, Rooster"} } My objective is to create a map that can calculate the frequency of each name: Pooja = 2 Triv ...

javascriptjquery

Lack of element content in AngularJS unit testing

I am currently working with AngularJS 1.5+, jasmine, and karma, and I am facing an issue when testing a component along with its template. When the component's template is compiled, it seems to be missing the expected content. Here is a snippet of th ...

javascriptangularjsjasminecomponents

An issue has been encountered with GAMLSS: Missing values present in the working vector or weights for the parameter mu

I encountered an issue with the error message ERROR : NA's in the working vector or weights for parameter mu while using the gamlss function as shown below: fit <- gamlss::gamlss(x ~ y, sigma.formula = ~ y, data = d, family = GA) Here, d refers to ...

rgamlss

Despite having a result, the Promise is returning an undefined value

In Vuejs, I have a method named getUsers that takes an array as input and fetches user data from the database. When calling it like this, it successfully returns the results: this.getUsers(executives).then( result => { this.speci ...

javascriptvue.jsvuejs2promisevue-component

Prevent selection of future dates in JavaScript by using the user's chosen StartDate

Here is the code I currently have: var today = new Date().toISOString().split('T')[0]; document.getElementsByName("StartDate")[0].setAttribute('min', today); $('#StartDate').change(function myfunction() { var endDate = ...

javascriptjquery

Browser unable to interpret HTML tag stored in ModelMap as HTML content

I am working on a spring controller with the code snippet below : @RequestMapping(value="/getMessage.htm", method=RequestMethod.POST) protected String uploadFile(ModelMap model){ //... other codes model.addAttribute("theMessage", "Hello world ...

javajavascriptspringjstlhtml4

When using ng-repeat in Angular.js, an additional td is created

https://jsfiddle.net/gdrkftwm/ https://i.sstatic.net/CTi2F.jpg I have encountered a problem while creating a table from a Json object. There seems to be an extra td being generated, and I'm not sure why. I want the structure of my table to resemble ...

javascriptangularjs

The `$scope variable fails to update in another controller`

I am currently facing an issue with updating a value on my view. Let me walk you through my code along with a brief explanation of the situation. The code may look messy as I have been experimenting with different combinations lately. The controller in qu ...

javascriptangularjs

Creating a JavaScript class that mimics the behavior of a C# class/object and can be seamlessly used in a Vue component

I am looking to develop a unique Javascript class that can be instantiated from a Vue component and have functions called on it similar to how it is done in C#. public class MyCustomClass() { public MyCustomClass(string someParameter){ .... ...

javascriptvue.jsvue-componentjavascript-objects

"Embed a filter in the loopback framework prior to sending a GET request

I've integrated Loopback into my Node.js app for generating the CRUD API automatically. I needed to customize one of the GET APIs to include a table as well. The typical way to achieve this is by adding an include filter in the query like: /api/expen ...

javascriptnode.jsexpressloopbackjs

What are the differences between incorporating JavaScript directly into HTML and writing it in a separate file?

I need help converting this JavaScript embedded in HTML code into a standalone JavaScript file. I am creating a toggle switch that, when clicked, should go to a new page after the transformation. I am looking for the non-embedded version of the function. H ...

javascripthtmljquerycssonclick

Automate your workflow with Apps Script: Save time by appending a row and seamlessly including additional details to the

I currently have 2 server-side scripts that handle data from an html form. The first script saves user input to the last row available in my Google sheet, while the second script adds additional details to the newly created row. Although both scripts work ...

javascriptgoogle-apps-script