Tips for implementing bslib package pop up window within a table displayed using rhandsontable in R Shiny

I am trying to implement the template from Laurent's answer on R Shiny - Popup window when hovering over icon in my code below, which involves integrating a popup window into a rhandsontable table. My goal is to display the popup window as depicted in the image provided. Can anyone help troubleshoot why my code is not functioning properly?

https://i.sstatic.net/rPULL.png

Here is the code snippet:

library(rhandsontable)
library(shiny)
library(bslib)

css <- '
.tooltip {
  pointer-events: none;
}
.tooltip > .tooltip-inner {
  pointer-events: none;
  background-color: #73AD21;
  color: #FFFFFF;
  border: 1px solid green;
  padding: 10px;
  font-size: 25px;
  font-style: italic;
  text-align: justify;
  margin-left: 0;
  max-width: 1000px;
}
.tooltip > .arrow::before {
  border-right-color: #73AD21;
}
'

js <- "
$(function () {
  $('[data-toggle=tooltip]').tooltip()
})
"
ui = fluidPage(
  theme = bs_theme(version = 4),
  tags$head(
    tags$style(HTML(css)),
    tags$script(HTML(js))
  ),
  br(),
  rHandsontableOutput('my_table')
)

server = function(input,output,session){
  DF = data.frame(
    Col_1 = c("This is row 1","This is row 2"), 
    Col_Help = c(
      as.character(
        span(
          "Example",
          span(
            `data-toggle` = "tooltip", `data-placement` = "right",
            title = "A tooltip",
            icon("info-circle")
          )
        )
      ),
      as.character(
        span(
          "Example",
          span(
            `data-toggle` = "tooltip", `data-placement` = "right",
            title = "A tooltip",
            icon("info-circle")
          )
        )
      )
    ),
    text = c("Row 1 does xxx","Row 2 does yyy"),
    stringsAsFactors = FALSE
  )
  
  output$my_table <- renderRHandsontable({
    rhandsontable::rhandsontable(
      DF
    ) %>%
      hot_cols(colWidths = c(200, 80)) %>%
      hot_col(1:2, renderer = htmlwidgets::JS("safeHtmlRenderer")) %>%
      hot_cols(colWidths = ifelse(names(DF) != "text", 100, 0.1))
  })
  
}
  
shinyApp(ui, server)
javascriptcssrshinybslib

Answer №1

To ensure proper rendering of specific HTML tags, it is necessary to specify the allowedTags when using the safeHTMLRenderer.

One issue that may arise is the incorrect rendering of the icon unless the fontawesome::fa_html_dependency is manually added. This could be due to the unique rendering process of handsontable, which may not load the required dependencies for fontawesome icons properly.

Furthermore, for correct rendering, it is essential to trigger the .tooltip function after the content has been rendered, which may not happen when the DOM is ready. In such cases, it is recommended to utilize htmlwidgets::onRender instead of $().

Provided below is an example that demonstrates these concepts:

library(rhandsontable)
library(shiny)
library(bslib)

css <- '
.tooltip {
  pointer-events: none;
}
.tooltip > .tooltip-inner {
  pointer-events: none;
  background-color: #73AD21;
  color: #FFFFFF;
  border: 1px solid green;
  padding: 10px;
}
.tooltip > .arrow::before {
  border-right-color: #73AD21;
}
'

ui = fluidPage(
  theme = bs_theme(version = 4),
  tags$head(
    tags$style(HTML(css)),
    fontawesome::fa_html_dependency(),
  ),
  br(),
  rHandsontableOutput('my_table')
)

server = function(input,output,session){
  DF = data.frame(
    Col_1 = c("Row 1","Row 2"), 
    Col_Help = c(
      as.character(
        span(
          "Example",
          span(
            `data-toggle` = "tooltip", `data-placement` = "right",
            title = "A tooltip",
            icon("info-circle")
          )
        )
      ),
      as.character(
        span(
          "Example",
          span(
            `data-toggle` = "tooltip", `data-placement` = "right",
            title = "A tooltip",
            icon("info-circle")
          )
        )
      )
    ),
    text = c("Row 1 does xxx","Row 2 does yyy"),
    stringsAsFactors = FALSE
  )

  output$my_table <- renderRHandsontable({
    rhandsontable::rhandsontable(
      DF, allowedTags = "<span><i>"
    ) %>%
      hot_cols(colWidths = c(200, 80)) %>%
      hot_col(1:2, renderer = htmlwidgets::JS("safeHtmlRenderer")) %>%
      hot_cols(colWidths = ifelse(names(DF) != "text", 100, 0.1)) %>%
      htmlwidgets::onRender("function() {$('[data-toggle=tooltip]').tooltip()}")
  })

}

shinyApp(ui, server)

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

Is there a way to create a timed fadeIn and fadeOut effect for a div using HTML and CSS?

I have a single div that initially displays text, and I want it to fade out after a specific time so that another div will then fade in. However, my attempt at coding this transition is not producing the desired result: $(function() { $(".preloa ...

javascripthtmljquerycss

When should the preloader be placed within the DOMContentLoaded or load event?

I'm looking to implement a preloader on my website to ensure everything is fully loaded - images, JavaScript, fonts, etc. However, I'm unsure whether to use the following: window.addEventListener('DOMContentLoaded', () => { // code ...

javascripthtmlcss

Error occurs when running Visual Studio Code locally - variable not defined

After successfully going through a Microsoft online demo on setting up an httpTrigger in Visual Studio Code with JavaScript to upload it to Azure Functions, I decided to customize the code for a specific calculation. I managed to get the calculation done a ...

javascriptnode.jsjsonvisual-studio-codeazure-functions

Issue with distinguishing JavaScript code from an SVG file

Seeking assistance as I have an SVG file that is mostly composed of a script. My goal is to separate the script for compression purposes, but I am struggling to find a way to achieve this. Any guidance or help on this matter would be greatly appreciated. ...

javascripthtmlsvg

Struggling to render images within a child component in a React application when passed as a prop from the parent component

Currently immersed in a React project, here is the structured layout of my work: public index.html src App.js images facebook.png image.PNG linkedin.png profile.png twitter.png Profile Intro profileIntro.js data data.js Within App.js, I import ...

javascriptreactjsreact-nativeweb-deploymentreact-props

Creating a full-height application with CSS3 Flexbox and managing overflow

I'm currently working on an app that utilizes a traditional email layout similar to the one illustrated below. Using the new CSS3 flexbox model, everything was functioning perfectly until I added the feature for users to dynamically insert new items ...

cssflexbox

Exploring nested static properties within TypeScript class structures

Check out this piece of code: class Hey { static a: string static b: string static c: string static setABC(a: string, b: string, c: string) { this.a = a this.b = b this.c = c return this } } class A { static prop1: Hey static ...

javascripttypescript

Properly maintaining child processes created with child_process.spawn() in node.js

Check out this example code: #!/usr/bin/env node "use strict"; var child_process = require('child_process'); var x = child_process.spawn('sleep', [100],); throw new Error("failure"); This code spawns a child process and immediately ...

javascriptnode.js

Impact of designs on the elements within components

Here's a CSS query I have: If I have the code below, does the styling apply to the contents of v-container but not v-container itself? <v-app id="inspire"> <v-container justify-center style="max-width: 1200px"> <v-layout row ...

cssvue.jsvuetify.js

Identifying the class name of SVGAnimatedString

While working on creating an SVG map, I encountered an issue where the functions triggered by hovering over 'g' elements were not functioning as expected. In order to troubleshoot this problem, I decided to check for any issues with the class nam ...

javascriptjquerysvg

How to position two divs in a row using Bootstrap

Looking at the output below: https://i.stack.imgur.com/pQM8F.png The blue circle is placed in one div, while the text is in another. I'm perplexed by why the first div appears on top and the second doesn't seem to align properly. Here's th ...

htmlcsstwitter-bootstrap-3

Managing various swipe interactions using HTML and JavaScript/jQuery

I'm in the process of creating a mobile multiplayer game using HTML5 and Javascript. The jQuery Plugin "touchwipe" is utilized to manage swipe events in various divs like this: $('#play1').touchwipe({ wipeLeft: function(){ if ...

javascriptandroidhtmliosswipe

Interoperability between C's tiny-aes-c library and Javascript's CryptoJS

Utilizing the implementation from tiny-aes-c, take a look at this C code snippet: int main(int argc, char const *argv[]) { uint8_t key[6] = { 's','e','c','r','e','t' }; uint8_t iv[16] = ...

javascriptcnode.jsaescryptojs

In TypeScript, there is a curious phenomenon where private properties seem to be mimicking the

Here is an example of an issue I encountered while working with private properties in TypeScript. I expected that only the public properties would be visible in my object output, similar to normal encapsulation. My aim here is to include the property wit ...

javascripttypescriptoopproperties

When the onclick function is triggered, two or more characters will be displayed

Functionality: To input name and email, users must click on the virtual keyboard displayed on the screen. Characters entered will be shown in the input box. Implementation: The HTML keyboard interface and associated script have been developed successful ...

javascriptjqueryhtmlkeyboard

What is the best way to implement next and previous buttons in a slideshow using code?

Looking to enhance my slideshow by replacing the standard "Next" and "Previous" text buttons with custom JPEG images I've created. Anyone familiar with the steps needed to make this switch in the HTML code? Current HTML code in use: <body sty ...

jqueryhtmlcssslideshow

What is the method to assign multiple values to ng-disabled in AngularJS?

Is there a way to assign multiple values for ng-disabled in AngularJS? The issue I'm facing is demonstrated in the following JS Fiddle: http://jsfiddle.net/FJf4v/10/ <div ng-app> <div ng-controller="myCnt"> <h3>A ->> ...

javascripthtmlangularjsangularjs-directive

I am interested in accessing the information of the currently logged-in user

I am new to AngularJS and I am looking for help on retrieving information about the logged-in user. I want to be able to display this information but I'm not sure where to start. Here is my main Angular controller: var myApp = angular.module('my ...

javascriptangularjs

Display the page number when printing using CSS

I am struggling to display the page number at the bottom of my printable document. I followed a source on Stack Overflow, but unfortunately, it did not work for me. My current CSS attempt to achieve this is as follows: body { text-align: justify; } /* ...

htmlcss

Are there any ways to pass an onClick function to a controller in React?

To prevent duplicate numbers from being generated, I added a button that, when clicked by a user, displays a message indicating that the value is being saved to avoid duplicates. However, when attempting to handle this on the server side controller, I enco ...

javascriptc#ajaxasp.net-mvc