1

Friends, could you help me insert a bs_embed_popover in my shiny. I would like to add an icon similar to the image below to be able to make a descriptive text. I would like to insert for the first radioButton.

library(shinyBS)
library(shiny)

ui <- fluidPage(
  
  
  titlePanel("Old Faithful Geyser Data"),
  
  sidebarLayout(
    sidebarPanel(
      
      radioButtons("filter1", h3("Select properties"),
                     choices = list("All properties" = 1, 
                                    "Exclude properties" = 2),
                     selected = 1),
      
      radioButtons("filter2", h3("Select farms"),
                   choices = list("All farms" = 1, 
                                  "Exclude farms" = 2),
                   selected = 1),
      sliderInput("bins",
                  "Number of bins:",
                  min = 1,
                  max = 20,
                  value = 30)
    ),
    
    mainPanel(
      plotOutput("distPlot")
    )
  )
)

server <- function(input, output) {
  
  output$distPlot <- renderPlot({
     x    <- faithful[, 2]
    bins <- seq(min(x), max(x), length.out = input$bins + 1)
    
    hist(x, breaks = bins, col = 'darkgray', border = 'white')
  })
}

shinyApp(ui = ui, server = server)

Example

enter image description here

Thank you very much!

Community
  • 1
  • 1
Antonio
  • 1,091
  • 7
  • 24

1 Answers1

1
  radioButtons(
    "filter1", 
    tagList(
      tags$span("Select properties", style = "font-size: 24px; font-weight: normal;"), 
      tags$span(icon("info-circle"), id = "icon", style = "color: blue;")
    ),
    choices = list("All properties" = 1, 
                   "Exclude properties" = 2),
    selected = 1
  ),

  bsPopover("icon", "TITLE", "CONTENT", placement = "right"),

enter image description here

To have a popover for the options of the radio buttons, do:

  radioButtons(
    "filter1", 
    h3("Select properties"), 
    choiceValues = c(1, 2),
    choiceNames = list(
      tagList(
        tags$span("All properties"),
        tags$span(icon("info-circle"), id = "icon1", style = "color: blue;")
      ), 
      tagList(
        tags$span("Exclude properties"),
        tags$span(icon("info-circle"), id = "icon2", style = "color: blue;")
      )
    ),
    selected = 1
  ),

  bsPopover("icon1", "TITLE1", "CONTENT1", placement = "right"), 
  bsPopover("icon2", "TITLE2", "CONTENT2", placement = "right"), 
Stéphane Laurent
  • 75,186
  • 15
  • 119
  • 225
  • Thank you very much Stéphane. Can I create these icons for each option of the first radiobutton as well? Thanks again – Antonio May 12 '20 at 14:22
  • Thank very much friend! – Antonio May 12 '20 at 15:09
  • Please could you take a look (https://stackoverflow.com/questions/61779533/increase-the-width-of-the-text-box-made-by-bspopover-in-shiny). Thank you! – Antonio May 13 '20 at 16:13