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.

Your HTML in the dropdown is being sanitized for security reasons (i.e. all tags except those whitelisted are being removed). There's an option, something like `sanitize=FALSE` that will switch this off if you're confident that no-one can inject malicious HTML into it. — MattB, May 26 '20 at 15:46
Thank you. Your feedback makes sense according to the whitelisted elements. https://getbootstrap.com/docs/4.3/getting-started/javascript/. Now I need to figure out the correct syntax for implementing. options = list(sanitize=FALSE) is not working — Susan Switzer, May 26 '20 at 17:32
Yeah, from memory there's a weird bug with the way the R package converts the options into js, and you have to use a really specific syntax. I can't find it any more though. — MattB, May 26 '20 at 17:42

score 4 · Accepted Answer · answered May 26 '20 at 15:36

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)

I appreciate this idea, but I can't figure out how to add line breaks and additional text. I have attempted tags$div( tags$span(style = "color: #22a783;", "green"),'\n', tags$span(style = "color: red;", "Red"), tags$span(style = "color: green;", "Green"), "Black" ) — Susan Switzer, May 26 '20 at 17:08
You need to use HTML tags (https://shiny.rstudio.com/articles/tag-glossary.html), for line break use `tags$br()`, you can also replace `span` (inline) by `div` (block) — Victorp, May 27 '20 at 07:54

Font color for single text element in Shiny bsPopover

1 Answers1