R Shiny中bslib与shinyBS兼容问题：Bootstrap5下悬浮弹窗失效

shinyBS包仅适配Bootstrap3，与Bootstrap4/5的组件体系、API不兼容，导致弹窗功能失效。以下是两种适配Bootstrap5的可行方案：

方案一：使用bslib原生弹窗组件（静态场景首选） #

bslib提供了适配Bootstrap5的popover()函数，可直接在UI中定义，无需依赖shinyBS，代码更简洁：

library(shiny)
library(bslib)

ui <- navbarPage(
  title = "Shiny",
  theme = bslib::bs_theme(bootswatch = "cosmo", version = 5),
  tabPanel(
    "Tab 1",
    fluidPage(
      mainPanel(
        # 用bslib的popover包裹按钮，直接配置弹窗参数
        popover(
          actionButton("popupBtn", label = "?", class = "btn-info"),
          title = "Data",
          content = "Mon texte",
          trigger = "hover"
        )
      )
    )
  )
)

server <- function(input, output, session) {
  # 无需额外server端代码
}

shinyApp(ui, server)

方案二：手动初始化Bootstrap5原生弹窗（动态场景适用） #

如果需要在server端动态修改弹窗内容或触发条件，可直接调用Bootstrap5原生JS API，通过tags$script完成初始化：

library(shiny)
library(bslib)

ui <- navbarPage(
  title = "Shiny",
  theme = bslib::bs_theme(bootswatch = "cosmo", version = 5),
  tabPanel(
    "Tab 1",
    fluidPage(
      mainPanel(
        # 给按钮添加Bootstrap5弹窗所需的data属性
        actionButton("popupBtn", label = "?", class = "btn-info", 
                     `data-bs-toggle` = "popover",
                     `data-bs-title` = "Data",
                     `data-bs-content` = "Mon texte",
                     `data-bs-trigger` = "hover"),
        # 初始化所有弹窗组件
        tags$script(HTML("
          var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle=\"popover\"]'))
          var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
            return new bootstrap.Popover(popoverTriggerEl)
          })
        "))
      )
    )
  )
)

server <- function(input, output, session) {
  # 示例：动态修改弹窗内容
  observeEvent(input$popupBtn, {
    session$sendCustomMessage("updatePopover", list(
      id = "popupBtn",
      content = "点击后更新的弹窗内容"
    ))
  })
}

# 自定义消息处理动态更新逻辑
shinyApp(ui, server, onStart = function() {
  session <- getDefaultReactiveDomain()
  session$onMessage("updatePopover", function(message) {
    session$sendCustomMessage("jsUpdate", message)
  })
  tags$script(HTML("
    Shiny.addCustomMessageHandler('jsUpdate', function(msg) {
      var popover = bootstrap.Popover.getInstance(document.getElementById(msg.id));
      popover.setContent({'.popover-body': msg.content});
    });
  "))
})

注意事项 #

• 方案一适合静态弹窗场景，完全基于bslib生态，适配性最佳；
• 方案二适合需要动态交互的场景，直接对接Bootstrap5原生能力，灵活性更高。

内容的提问来源于stack exchange，提问作者nimliug