Change background colour in one bslib::popover()

[MarekGierlinski]

I have a Shiny app using bslib cards. A card has two popover icons, one for settings, the other will contain a help document. I want the help document to have a different background colour, but retain the settings background colour as it is. Here is an example:

library(shiny)
library(bslib)
library(ggplot2)

gear <- bslib::popover(
  bsicons::bs_icon("gear"),
  "some settings"
)

info <- bslib::popover(
  bsicons::bs_icon("info-circle"),
  "Help text - want this with different background colour"
)

ui <- bslib::page_sidebar(
  title = "test",
  sidebar = "Sidebar",
  
  bslib::card(
    bslib::card_header(
      "Test",
      shiny::span(info, gear),
      class = "d-flex justify-content-between"
    ),
    bslib::card_body(
      shiny::plotOutput("plot")
    )
  )
)

server <- function(input, output, session) {
  output$plot <- shiny::renderPlot({
    ggplot(mtcars, aes(mpg, hp)) +
      geom_point()
  })
}

shiny::shinyApp(ui, server)

I tried inserting the following css into the UI:

    shiny::tags$head(
      shiny::tags$style(shiny::HTML("
            .popover {
                background-color: #f0f9e8;
            }
            .popover .popover-body {
                background-color: #f0f9e8; 
            }
        "))
    )

but this changes all popovers in the app. I want to change only one.

[michaelbgarcia]

This scenario is outlined in the help pages: Add a popover to a UI element — popover • bslib

Use the customClass option and then add the rule to bs_theme() via bs_add_rules()

library(shiny)
library(bslib)
library(ggplot2)

gear <- bslib::popover(
  bsicons::bs_icon("gear"),
  "some settings"
)

info <- bslib::popover(
  bsicons::bs_icon("info-circle"),
  "Help text - want this with different background colour",
  options = list(customClass = "my-pop")
)

ui <- bslib::page_sidebar(
  title = "test",
  sidebar = "Sidebar",
  theme = bs_theme() |> bs_add_rules(".my-pop { background-color: #f0f9e8; }"),
  bslib::card(
    bslib::card_header(
      "Test",
      shiny::span(info, gear),
      class = "d-flex justify-content-between"
    ),
    bslib::card_body(
      shiny::plotOutput("plot")
    )
  )
)

server <- function(input, output, session) {
  output$plot <- shiny::renderPlot({
    ggplot(mtcars, aes(mpg, hp)) +
      geom_point()
  })
}

shiny::shinyApp(ui, server)

[MarekGierlinski]

That's exactly what I was looking for. Thank you!