使用bslib布局时为radioGroupButtons添加tooltip失效求助

问题背景 #

想给shinywidgets::radioGroupButtons（或shiny::radioButtons）的每个选项添加独立Tooltip，提示选择该选项的后果，参考的旧方案在传统Shiny布局下正常，但切换到bslib布局后完全失效。

失效原因 #

1. 旧方案依赖Bootstrap 3的Tooltip API，而bslib默认使用Bootstrap 5，两者Tooltip的初始化和调用方式完全不同
2. shinyBS包的依赖和bslib的Bootstrap版本冲突，导致Tooltip无法正确加载
3. 旧代码的jQuery选择器在bslib的DOM结构下，无法精准定位到radio按钮的父元素

修复方案 #

重写radioTooltip函数，适配Bootstrap 5的API，同时移除对shinyBS的依赖，直接利用bslib自带的Bootstrap工具：

radioTooltip <- function(id, choice, title, placement = "bottom", trigger = "hover") {
  # 构建Bootstrap 5 Tooltip的配置选项
  opts <- list(
    title = title,
    placement = placement,
    trigger = trigger,
    html = TRUE
  )
  # 转成JSON格式的配置字符串
  opts_json <- jsonlite::toJSON(opts, auto_unbox = TRUE)
  
  shiny::tags$script(shiny::HTML(paste0("
    document.addEventListener('DOMContentLoaded', function() {
      setTimeout(function() {
        // 定位到目标radio按钮
        const radioInput = document.querySelector('#", id, " input[value=\"", choice, "\"]');
        if(radioInput) {
          // radioGroupButtons的父元素是.btn-group下的label，radioButtons的父元素是div.radio下的label
          const targetEl = radioInput.closest('label');
          // 先销毁已存在的Tooltip（如果有）
          if(targetEl._tooltip) {
            targetEl._tooltip.dispose();
          }
          // 初始化Bootstrap 5 Tooltip
          new bootstrap.Tooltip(targetEl, ", opts_json, ");
        }
      }, 300);
    });
  ")))
}

完整可运行代码 #

library(shiny)
library(bslib)
library(shinyWidgets)
library(jsonlite) # 需要用到jsonlite来转配置选项

# 重写后的Tooltip函数
radioTooltip <- function(id, choice, title, placement = "bottom", trigger = "hover") {
  opts <- list(
    title = title,
    placement = placement,
    trigger = trigger,
    html = TRUE
  )
  opts_json <- jsonlite::toJSON(opts, auto_unbox = TRUE)
  
  shiny::tags$script(shiny::HTML(paste0("
    document.addEventListener('DOMContentLoaded', function() {
      setTimeout(function() {
        const radioInput = document.querySelector('#", id, " input[value=\"", choice, "\"]');
        if(radioInput) {
          const targetEl = radioInput.closest('label');
          if(targetEl._tooltip) {
            targetEl._tooltip.dispose();
          }
          new bootstrap.Tooltip(targetEl, ", opts_json, ");
        }
      }, 300);
    });
  ")))
}

# bslib布局的Shiny应用
ui <- page_sidebar(title = "App",
                   sidebar = sidebar(
                     shinyWidgets::radioGroupButtons(
                       "radioSelection", 
                       label = "So many options!", 
                       choices = c("A", "B", "C")
                     ),
                     radioTooltip(id = "radioSelection", choice = "A", title = "选择A会显示基础数据图表", placement = "right", trigger = "hover"),
                     radioTooltip(id = "radioSelection", choice = "B", title = "选择B会展示高级统计分析", placement = "right", trigger = "hover"),
                     radioTooltip(id = "radioSelection", choice = "C", title = "选择C会导出完整数据集", placement = "right", trigger = "hover")
                   ),
                   page_fillable(
                     column(9, 'Plot')
                   )
)

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

关键调整说明 #

• 改用原生JS事件监听替代jQuery，避免版本冲突
• 适配Bootstrap 5的Tooltip初始化方式：new bootstrap.Tooltip()，而不是旧的jQuery链式调用
• 使用closest('label')精准定位按钮的父容器，兼容radioGroupButtons和shiny::radioButtons两种组件的DOM结构
• 移除对shinyBS包的依赖，完全依赖bslib自带的Bootstrap 5资源
• 缩短延迟时间，提升Tooltip加载的响应速度

内容的提问来源于stack exchange，提问作者Carlos J. Daboin