Why is the shinyBS tooltip not showing up while using bslib?

Question

The shinyBS tooltips stop working when I start using bslib functions. How can I fix that?

Examples below:

This code from shinyBS works perfectly:

library(shiny)
library(shinyBS)
shinyApp(
 ui =
 fluidPage(
   sidebarLayout(
     sidebarPanel(
       sliderInput("bins",
                   "Number of bins:",
                   min = 1,
                   max = 50,
                   value = 30),
       bsTooltip("bins", "The wait times will be broken into this many equally spaced bins",
         "right", options = list(container = "body"))
     ),
     mainPanel(
       plotOutput("distPlot")
     )
   )
 ),
 server =
 function(input, output, session) {
   output$distPlot <- renderPlot({

     # generate bins based on input$bins from ui.R
     x    <- faithful[, 2]
     bins <- seq(min(x), max(x), length.out = input$bins + 1)

     # draw the histogram with the specified number of bins
     hist(x, breaks = bins, col = 'darkgray', border = 'white')

   })
 }
)

The exact same tooltip stops showing when I nest things inside bslib functions:

library(shiny)
library(shinyBS)
library(bslib)
shinyApp(
  ui =
    page_sidebar(
      title="Histogram",
      sidebar=sidebar(
        title="Controls",
          sliderInput("bins",
                      min=1,
                      max=50,
                      value=10,
                       "Number of bins:"),
          bsTooltip("bins", "The wait times will be broken into this many equally spaced bins",
                    "right", options = list(container = "body"))
        ),
        card(
          card_header("Histogram"),
          plotOutput("distPlot")
        )
      ),
  server =
    function(input, output, session) {
      output$distPlot <- renderPlot({
        
        # generate bins based on input$bins from ui.R
        x    <- faithful[, 2]
        bins <- seq(min(x), max(x), length.out = input$bins + 1)
        
        # draw the histogram with the specified number of bins
        hist(x, breaks = bins, col = 'darkgray', border = 'white')
        
      })
    }
)

I'm trying to create a shinyBS tooltip that explains what a simple shiny input (shiny::sliderInput, shiny::actionButton) does. I'm also using bslib to layout the app components.

I tried replicating shinyBS tutorials while using bslib functions in the app UI.

Answer 1

shinyBS works for Bootstrap 3. With bslib you use Bootstrap 5. Here is a way:

library(shiny)
library(bslib)

bslibTooltip <- function(
    id, title, placement = "bottom", trigger = "hover", options = NULL
){
  options = shinyBS:::buildTooltipOrPopoverOptionsList(title, placement, trigger, options)
  options = paste0("{'", paste(names(options), options, sep = "': '", collapse = "', '"), "'}")
  bsTag <- tags$script(HTML(paste0("
    $(document).ready(function() {
      opts = $.extend(", options, ", {html: true});
      setTimeout(function() {
        $('#", id, "').tooltip('dispose').tooltip(opts);
      }, 500)
    });
  ")))
}

shinyApp(
  ui =
    page_sidebar(
      title="Histogram",
      sidebar=sidebar(
        title="Controls",
        sliderInput("bins",
                    min=1,
                    max=50,
                    value=10,
                    "Number of bins:"),
        bslibTooltip(
          "bins-label", 
          "The wait times will be broken into this many equally spaced bins",
          placement = "right", 
          options = list(container = "body")
        )
      ),
      card(
        card_header("Histogram"),
        plotOutput("distPlot")
      )
    ),
  server =
    function(input, output, session) {
      output$distPlot <- renderPlot({
        
        # generate bins based on input$bins from ui.R
        x    <- faithful[, 2]
        bins <- seq(min(x), max(x), length.out = input$bins + 1)
        
        # draw the histogram with the specified number of bins
        hist(x, breaks = bins, col = 'darkgray', border = 'white')
        
      })
    }
)