Font color for single text element in Shiny bsPopover

Question

I would like to change the font color of one part of the text in the bsPopover content argument.

This syntax works on the Server side, but not in the content argument of the bsPopover function:

library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
library(shinyBS)

ui <- dashboardPagePlus(title = 'My Title',
                        ###### Header ####
                        header=dashboardHeaderPlus(
                          title = 'Title'),
      sidebar=dashboardSidebar(
                            disable = TRUE),
                          ###### Body ####
      body = dashboardBody(
                   fluidRow(
                     bsPopover(id = 'attend',
                               title = '', 
                               content = HTML(paste0('<span style=\"color:', '#22a783', '\">', 
                                                      'Green', '</span>', 
                                                      '<br>', 'Red', '<br>', 'Blue', '<br>','Black')), 
                               placement = "bottom", 
                               trigger = "hover",
                               options = NULL),
                     actionButton(inputId = "attend", 
                                  label = "", 
                                  icon = icon('info')))))
#################### SERVER   #################### 
server = function(input, output, session) { 
}
# Run the application
shinyApp(ui = ui, server = server)

I would like to have the text, "green", display in green. The text, "red", display in red, etc.

I can change all of the text color in the css, but I can't seem to fine tune single text elements outside of a css

Thanks for any ideas.

Answer 1

As an alternative you can use dropMenu from shinyWidgets, and directly use HTML tags inside it:

library(shiny)
library(shinydashboard)
library(shinyWidgets)

ui <- dashboardPage(
  title = 'My Title',
  ###### Header ####
  header=dashboardHeader(
    title = 'Title'
  ),
  sidebar=dashboardSidebar(
    disable = TRUE
  ),
  ###### Body ####
  body = dashboardBody(
    fluidRow(
      dropMenu(
        actionButton(
          inputId = "attend", 
          label = "", 
          icon = icon('info')
        ),
        tags$div(
          tags$span(style = "color: #22a783;", "green"),
          tags$span(style = "color: red;", "Red"),
          tags$span(style = "color: green;", "Green"),
          "Black"
        ),
        placement = "bottom",
        trigger = "mouseenter"
      )
    )
  )
)
#################### SERVER   #################### 
server = function(input, output, session) { 
}
# Run the application
shinyApp(ui = ui, server = server)