如何在Shiny的accordionItem标题栏添加popover或信息按钮？

方法1：标题旁添加信息按钮触发弹窗 #

将弹窗绑定到标题内的信息图标上，点击图标即可显示弹窗内容。修改后的代码如下：

library(shiny)
library(bs4Dash)

shinyApp(
  ui = dashboardPage(
    dashboardHeader(),
    dashboardSidebar(),
    dashboardBody(
      accordion(id = "accordion1",
                accordionItem(
                  title = tagList(
                    "Shiny Box",
                    popover(
                      icon("info-circle", style = "margin-left: 8px;"),
                      title = "My popover",
                      placement = "right",
                      content = "Test popover content here"
                    )
                  ),
                  status = "success",
                  solidHeader = TRUE,
                  collapsed = TRUE,
                  div(id="inline",  style="width:35vw;",
                      div(HTML("<b>TEST </b>")),
                      br(),
                      numericInputIcon("A", h5("test1"), value = 20, icon = icon("percent")),
                      numericInputIcon("B", h5("test2"), value = 40, icon = icon("percent")),
                      numericInputIcon("C", h5("test3"), value = 60, icon = icon("percent")),
                      numericInputIcon("D", h5("test4"), value = 20, icon = icon("percent")),
                      currencyInput("X", "Total", value = 0.3, format = "percentageUS2dec")
                  )
                )
      )
    )
  ),
  server = function(input, output) { }
)

说明： #

• 使用tagList将标题文本和信息图标组合，保证标题布局正常
• 弹窗组件仅绑定到info-circle图标，精准触发交互
• 通过内联样式调整图标与文本的间距，提升视觉体验

方法2：标题文本悬停触发弹窗 #

若希望鼠标悬停标题时自动显示弹窗，可直接为标题文本绑定hover触发的弹窗：

library(shiny)
library(bs4Dash)

shinyApp(
  ui = dashboardPage(
    dashboardHeader(),
    dashboardSidebar(),
    dashboardBody(
      accordion(id = "accordion1",
                accordionItem(
                  title = popover(
                    span("Shiny Box"),
                    title = "My popover",
                    placement = "right",
                    content = "Test popover content here",
                    trigger = "hover"
                  ),
                  status = "success",
                  solidHeader = TRUE,
                  collapsed = TRUE,
                  div(id="inline",  style="width:35vw;",
                      div(HTML("<b>TEST </b>")),
                      br(),
                      numericInputIcon("A", h5("test1"), value = 20, icon = icon("percent")),
                      numericInputIcon("B", h5("test2"), value = 40, icon = icon("percent")),
                      numericInputIcon("C", h5("test3"), value = 60, icon = icon("percent")),
                      numericInputIcon("D", h5("test4"), value = 20, icon = icon("percent")),
                      currencyInput("X", "Total", value = 0.3, format = "percentageUS2dec")
                  )
                )
      )
    )
  ),
  server = function(input, output) { }
)

说明： #

• 用popover包裹标题文本，设置trigger = "hover"实现悬停触发
• 使用span标签包裹标题内容，确保弹窗正确绑定到标题元素

原代码问题分析 #

你之前的代码将整个accordionItem包裹在popover中，导致弹窗绑定到了整个折叠面板容器而非标题栏。通过将弹窗组件精准绑定到标题内的特定元素（图标或文本），即可实现预期的交互效果。

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