CODEWITHSUNDEEP
htmlrshinydatatabletooltip
Parinn
Parinn

Reputation: 209

Shiny tooltips / spsComps

My question is in regards to

Shiny: Add Popover to Column Name in Datatable, the package spsComps for using tooltips, when I remove the tooltip which is defined in the mainPanel, the tooltip on the datatable column also does not work anymore.

   library(shiny)
library(spsComps)
library(DT)
library(dplyr)
# define the question button in a button since we need to uses multiple times
infoBtn <- function(id) {
    actionButton(id,
                 label = "",
                 icon = icon("question"),
                 style = "info",
                 size = "extra-small",
                 class='btn action-button btn-info btn-xs shiny-bound-input'
    )
}
ui <- fluidPage(
    titlePanel('Making a Popover Work in DataTable'),
    mainPanel(

       
   fluidRow(dataTableOutput('myTable'))
    )
)

server <- function(input, output, session) {
    output$myTable <- DT::renderDataTable({
        # construct the title and convert to text
        hp_text <- tags$span(
            "hp", 
            infoBtn('notWorking') %>% 
                bsPopover(title = "This one does not work",
                          content = "I'd like to give information about hp: it means horsepower. I want a popover, because my real example has lot's of text.",
                          placement = "top",
                          trigger = "hover")
        ) %>% 
            as.character()
        # use !! and := to inject variable as text
        datatable(mtcars %>% rename(!!hp_text:=hp),
                  rownames=TRUE,
                  selection='none',
                  escape=FALSE)
    })
}

shinyApp(ui = ui, server = server)

However, when once a tooltip is displayed once in the UI, then it also works for the datatable (from @lz100)

library(shiny)
library(spsComps)
library(DT)
library(dplyr)
# define the question button in a button since we need to uses multiple times

infoBtn <- function(id) {
    actionButton(id,
                 label = "",
                 icon = icon("question"),
                 style = "info",
                 size = "extra-small",
                 class='btn action-button btn-info btn-xs shiny-bound-input'
    )
}

ui <- fluidPage(
    titlePanel('Making a Popover Work in DataTable'),
    mainPanel(
    fluidRow(
        #popover button
        infoBtn('workingPop') %>% 
            bsPopover(title = "This Popover Works",
                  content = "It works very well",
                  placement = "right",
                  trigger = "hover"
            )
    ),
    fluidRow(dataTableOutput('myTable'))
)
 )

server <- function(input, output, session) {
    output$myTable <- DT::renderDataTable({
        # construct the title and convert to text
    hp_text <- tags$span(
        "hp", 
        infoBtn('notWorking') %>% 
            bsPopover(title = "This one does not work",
                      content = "I'd like to give information about hp: it means horsepower. I want a popover, because my real example has lot's of text.",
                      placement = "top",
                      trigger = "hover")
    ) %>% 
        as.character()
    # use !! and := to inject variable as text
    datatable(mtcars %>% rename(!!hp_text:=hp),
              rownames=TRUE,
              selection='none',
              escape=FALSE)
})
}

shinyApp(ui = ui, server = server)

Is this a bug? Or is there something I am missing?

Upvotes: 0

Views: 552

Answers (1)

lz100
lz100

Reputation: 7340

Change this on your UI:

    mainPanel(
        fluidRow(dataTableOutput('myTable')),
        spsDepend("pop-tip")
    )

So here, we add spsDepend("pop-tip"). This means loading the dependent Javascript library when app starts. In therory, -v-, the dependency would be automatically added, users do not need to know this. However, in this case, you are using the renderDataTable function. This package does not know how to handle htmltools::htmlDependency, which is the mechanism how usually developers add JS dependencies for shiny apps.

In your case, if you only use it once in the renderDataTable, we need to manually add the dependency in UI by spsDepend. But like your second case, if it has been used at least once in the UI, the dependency is there, you don't need to worry.

enter image description here

You can see the question mark for the button is not working either. The same problem. renderDataTable does not know how to add the dependency for actionButton. So in general, I wouldn't call it a bug, but a feature DT package doesn't support yet.

For the question mark, even if is not a problem caused by spsComps, but we do have a solution from spsComps, adding the icon library:

    mainPanel(
        fluidRow(dataTableOutput('myTable')),
        spsDepend("pop-tip"),
        spsDepend("font-awesome")
    )

Upvotes: 1

Related Questions