How to insert a hover over pop up window in R Shiny table?

Question

I found an old post, Add bootstrap tooltip to column header in shiny app, that basically and almost gets at what I need but I'm trying to clean it up. My questions are:

(1) how to remove the annoying pop up what appears when first invoking the below Code, as shown in the next image,

(2) will there be a way to adjust the size of, and otherwise format, the text ("HELLO") that appears when hovering over the table column header, and

(3) are there better options now for doing this sort of thing, where you get an editable, formattable pop-window (with user instructions) when you hover over a specific text string in a table?

Code:

library(shiny)

ui <- fluidPage(fluidRow(column(12,dataTableOutput('table'))))
  
server <- function(input, output) {
  output$table <- renderDataTable(
    iris,
    options = 
      list(
      pageLength = 5,
        initComplete = I("function(settings, json) {alert('Done.');
            $('th').each( function(){this.setAttribute('title','HELLO');});  
            $('th').tooltip();
            }")
      )
    )
    
  tags$head(tags$script("
      $('table th').each(function(){ console.log( $(this).text());
            $(this).attr('data-toggle','tooltip')
            $(this).attr('title','example text')
            $(this).tooltip();
        );
      "))
}

shinyApp(ui,server)

Answer to your question about how to remove the box, remove `alert('Done.')` — Carsten Løvbo Andersen, Oct 25 '22 at 06:22
Might be worth looking at the `shinyBS` package - see https://ebailey78.github.io/shinyBS/docs/Tooltips_and_Popovers.html — Eli Berkow, Oct 25 '22 at 10:50

score 1 · Accepted Answer · answered Oct 25 '22 at 15:01

Once you have an id for the header, you can apply the shinyBS::bsPopover function. To have an id, you can use the container argument of DT::datatable.

library(shiny)
library(DT)
library(shinyBS)

sketch = htmltools::withTags(
  table(
    class = "display",
    thead(
      tr(
        th("Sepal length"),
        th("Sepal width"),
        th("Petal length"),
        th("Petal width"),
        th("Species", id = "header-species")
      )
    )
  )
)

ui <- fluidPage(
  br(),
  DTOutput("dtable"),
  bsPopover(
    id      = "header-species",
    title   = "Species",
    content = "This is the species column"
  )
)

server <- function(input, output, session) {
  output[["dtable"]] <- renderDT({
    datatable(iris, rownames = FALSE, container = sketch)    
  })
}

shinyApp(ui, server)

How to insert a hover over pop up window in R Shiny table?

1 Answers1