bslib page_fillable布局下Shiny的bsPopover hover功能失效求解

问题背景 #

原本在传统fluidPage布局中，shinyBS的bsPopover hover提示可以正常工作，但切换到bslib的page_fillable布局后，提示功能失效。

正常运行的示例代码（fluidPage布局） #

library(shiny)
library(shinyBS)

ui <- fluidPage(
    titlePanel("Old Faithful Geyser Data"),
    sidebarLayout(
        sidebarPanel(
            sliderInput("bins",
                        "Number of bins:",
                        min = 1,
                        max = 50,
                        value = 30)
        ),
        mainPanel(
           plotOutput("distPlot"),
           bsPopover(id = "bins", title = "More information", content = "Slider for number of bins", 
                     placement = "bottom", trigger = "hover")
        )
    )
)

server <- function(input, output) {
    output$distPlot <- renderPlot({
        x    <- faithful[, 2]
        bins <- seq(min(x), max(x), length.out = input$bins + 1)
        hist(x, breaks = bins, col = 'darkgray', border = 'white',
             xlab = 'Waiting time to next eruption (in mins)',
             main = 'Histogram of waiting times')
    })
}

shinyApp(ui = ui, server = server)

效果：

失效的示例代码（bslib page_fillable布局） #

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

ui <- page_fillable(
  titlePanel("Old Faithful Geyser Data"),
    card(
      sliderInput("bins",
                  "Number of bins:",
                  min = 1,
                  max = 50,
                  value = 30)
    ),
    card(
      plotOutput("distPlot"),
      bsPopover(id = "bins", title = "More information", content = "Slider for number of bins", 
                placement = "bottom", trigger = "hover")
    )
)

server <- function(input, output) {
  output$distPlot <- renderPlot({
    x    <- faithful[, 2]
    bins <- seq(min(x), max(x), length.out = input$bins + 1)
    hist(x, breaks = bins, col = 'darkgray', border = 'white',
         xlab = 'Waiting time to next eruption (in mins)',
         main = 'Histogram of waiting times')
  })
}

shinyApp(ui = ui, server = server)

效果：

原因 #

shinyBS基于Bootstrap 3开发，而bslib默认使用Bootstrap 5，两者的popover组件实现不兼容，导致bsPopover无法被正确初始化。

解决方案 #

方案1：使用bslib自带的tooltip功能 #

bslib内置Bootstrap 5的tooltip支持，无需依赖shinyBS，直接用bs_tooltip函数：

library(shiny)
library(bslib)

ui <- page_fillable(
  titlePanel("Old Faithful Geyser Data"),
  card(
    sliderInput("bins",
                "Number of bins:",
                min = 1,
                max = 50,
                value = 30) %>% 
      bs_tooltip(title = "More information", 
                 content = "Slider for number of bins", 
                 placement = "bottom", 
                 trigger = "hover")
  ),
  card(
    plotOutput("distPlot")
  )
)

server <- function(input, output) {
  output$distPlot <- renderPlot({
    x    <- faithful[, 2]
    bins <- seq(min(x), max(x), length.out = input$bins + 1)
    hist(x, breaks = bins, col = 'darkgray', border = 'white',
         xlab = 'Waiting time to next eruption (in mins)',
         main = 'Histogram of waiting times')
  })
}

shinyApp(ui = ui, server = server)

方案2：强制bslib使用Bootstrap 3 #

如果一定要保留shinyBS的bsPopover，可以让bslib切换到Bootstrap 3版本：

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

ui <- page_fillable(
  theme = bs_theme(version = 3), # 指定Bootstrap 3版本
  titlePanel("Old Faithful Geyser Data"),
  card(
    sliderInput("bins",
                "Number of bins:",
                min = 1,
                max = 50,
                value = 30)
  ),
  card(
    plotOutput("distPlot"),
    bsPopover(id = "bins", title = "More information", content = "Slider for number of bins", 
              placement = "bottom", trigger = "hover")
  )
)

server <- function(input, output) {
  output$distPlot <- renderPlot({
    x    <- faithful[, 2]
    bins <- seq(min(x), max(x), length.out = input$bins + 1)
    hist(x, breaks = bins, col = 'darkgray', border = 'white',
         xlab = 'Waiting time to next eruption (in mins)',
         main = 'Histogram of waiting times')
  })
}

shinyApp(ui = ui, server = server)

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