Village.Idyot
Village.Idyot

Reputation: 2095

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

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?

enter image description here

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)

Upvotes: 0

Views: 689

Answers (1)

St&#233;phane Laurent
St&#233;phane Laurent

Reputation: 84619

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)

enter image description here

Upvotes: 1

Related Questions