R shiny : Incompatibility of use between bslib and shinyBS

Question

I have a shinyapp with a navbar and a default theme.
I want to add a help button in one place in my application that displays a popup when you move the mouse over it.

I noticed that using a theme with a boostrap version > 3 inhibited the popup from working. with version = 3 it works normally

Here is a reproducible example :

library(shiny)
library(bslib)
library(shinyBS)

ui <- navbarPage(
  title = "Shiny",

  theme = bslib::bs_theme(bootswatch = "cosmo", version = 3), # not working with version = 4 or version = 5
  tabPanel(
    "Tab 1",
    fluidPage(
      mainPanel(
        bsButton("popupBtn", label = "?", style = "info")
      )
    )
  )
)

server <- function(input, output, session) {
  shinyBS::addPopover(
    session,
    "popupBtn",
    "Data",
    content = paste0("Mon texte"),
    trigger = 'hover'
  )
}

shinyApp(ui, server)

If anyone has a trick to make the theme work with version = 5 and the popup

Answer 1

Here is the way:

library(shiny)
library(bslib)

js <- "
$(document).ready(function() {
  var popoverTriggerList = 
    [].slice.call(document.querySelectorAll('[data-bs-toggle=popover]'));
  var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
    return new bootstrap.Popover(popoverTriggerEl);
  })
});
"

ui <- navbarPage(
  tags$head(tags$script(HTML(js))),
  
  title = "Shiny",
  theme = bslib::bs_theme(bootswatch = "cosmo", version = 5), 
  
  tabPanel(
    "Tab 1",
    fluidPage(
      mainPanel(
        actionButton(
          "popupBtn", 
          label = "?", 
          `data-bs-toggle` = "popover",
          title = "Popover title", 
          `data-bs-content` = 
            "And here's some amazing content. It's very engaging. Right?"  
        )
      )
    )
  )
)


server <- function(input, output, session) {
  
}

shinyApp(ui, server)

Here is the documentation.