Add popover or info botton to accordionItem title panel in shiny-CodePudding

I have a shiny app with accordion and I would like to add a popup message on the title panel either an info botton or a hovering function ! I have tried the popover from bs4Dash but it does not work on accordionItem :

library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
library(bs4Dash)

shinyApp(
  ui = dashboardPage(
    dashboardHeader(),
    dashboardSidebar(),
    dashboardBody(
      accordion(id = "accordion1",
        popover(       
        accordionItem(
        title = "Shiny Box",
        status = "success",
        solidHeader = TRUE,
        collapsed = TRUE,
         # bsPopover("Shiny Box","","test popover",
         #            "right", options = list(container = "body")),
        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")
        )
      ),
      title = "My popover",
      placement = "right",
      content = "Test popover"
      )
    )
  )
),
  server = function(input, output) { }
)

CodePudding user response：

Here's an option where you use addPopover in the server function to attach a popover to a specific id.

Edits

I've included two use cases since it's not clear to me if you want the popover to display when the mouse is over the entire accordionItem or a specific id inside the accordionItem. So both options are shown below.

Demo

library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
library(bs4Dash)
library(shinyWidgets)

shinyApp(
  ui = dashboardPage(
    dashboardHeader(),
    dashboardSidebar(),
    dashboardBody(
      accordion(id = "accordion1",
        accordionItem(
          title = "Shiny Box",
          status = "success",
          solidHeader = TRUE,
          collapsed = TRUE,
          div(id="inline",  style="width:35vw;",
            div(id = "pop-hover", HTML("<b>Hover over this to reveal the popover</b>")),
            br(),
            numericInputIcon("A", h5("test1"), value = 20, icon = icon("percent")),
            numericInputIcon("B", h5("test2"), value = 40, icon = icon("percent")),
            currencyInput("X", "Total", value = 0.3, format = "percentageUS2dec")
          )
        ),
        accordionItem(
          id = "item2",
          title = "Next",
          status = "danger",
          solidHeader = TRUE,
          collapsed = TRUE,
          div(
            HTML("<b>Hover anywhere in the accordionItem to reveal the popover</b>"),
            br(),
            numericInputIcon("C", h5("test3"), value = 60, icon = icon("percent")),
            numericInputIcon("D", h5("test4"), value = 20, icon = icon("percent")),  
          )
        )
      )
    )
  ),
  server = function(input, output) {
    addPopover(
      id = "pop-hover",
      options = list(
        title = "Title Popover",
        placement = "left",
        content = "Test popover",
        trigger = "hover"
      )
    )
    addPopover(
      id = "item2",
      options = list(
        title = "Item Popover",
        placement = "right",
        content = "next popover",
        trigger = "hover"
      )
    )
  }
)

CodePudding user response：

One option to add a popover on the title panel would be to first add an id attribute to the title panel of the accordionItem using tagAppendAttributes and the CSS selector .card-header. Afterwards you could use bs4Dash::addPopover to add a popover to the title panel:

library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
library(bs4Dash)
library(shinyWidgets)

shinyApp(
  ui = dashboardPage(
    dashboardHeader(),
    dashboardSidebar(),
    dashboardBody(
      accordion(
        id = "accordion1",
        accordionItem(
          title = "Shiny Box",
          status = "success",
          solidHeader = TRUE,
          collapsed = TRUE,
          div(
            id = "inline", style = "width:35vw;",
            div(HTML("<b>Hover anywhere to reveal the popover</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")
          )
        ) |> 
          tagAppendAttributes(id = "accordion_item", .cssSelector = ".card-header")
      )
    )
  ),
  server = function(input, output) {
    addPopover(
      id = "accordion_item",
      options = list(
        title = "Shiny Box",
        content = "Test Popover",
        trigger = "hover"
      )
    )
  }
)