0

As shown in the below image, I'm trying to place a line of text in front of an info icon rendered using the popify() function in the shinyBS package. The code at the bottom works for the situation where there is no text in front of info icon and commented-out is one of my attempts to insert the text. Uncomment, run the code, and you'll see garbled output.

So how would one insert text in front of the icon? One option is to split the text and icon into 2 separate columns, but I don't want to fiddle with the column widths to make it look right. I want the text to "flow into" the icon.

I thought this Stack Overflow question might provide an answer but it is a dead end: How to place both text and image output in one html div (rshiny)

enter image description here

Code:

library(shiny)
library(shinyBS)

app = shinyApp(
  ui =
    fluidPage(
      sidebarLayout(
        sidebarPanel(
          sliderInput("bins","Number of bins:",min = 1,max = 50,value = 30)
        ),
        mainPanel(
          plotOutput("distPlot"),
          uiOutput("uiExample")
        )
      )
    ),
  server =
    function(input, output, session) {
      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')
      })
      output$uiExample <- renderUI({
        # paste( #uncomment
          # "Look at the little circle >>", #uncomment
               tags$span(
                 popify(icon("info-circle", verify_fa = FALSE),
                        "Placeholder",
                        "This icon is <b>placeholder</b>. It will be fixed</em>!")
               )
        # ) #uncomment
      })
    }
)

runApp(app)
Village.Idyot
  • 1,359
  • 2
  • 8

1 Answers1

1

This could be achieved via a tagList and another span:

library(shiny)
library(shinyBS)

app = shinyApp(
  ui =
    fluidPage(
      sidebarLayout(
        sidebarPanel(
          sliderInput("bins","Number of bins:",min = 1,max = 50,value = 30)
        ),
        mainPanel(
          plotOutput("distPlot"),
          uiOutput("uiExample")
        )
      )
    ),
  server =
    function(input, output, session) {
      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')
      })
      output$uiExample <- renderUI({
        tagList(
          tags$span(
            "Look at the little circle >>"
          ),
          tags$span(
            popify(icon("info-circle", verify_fa = FALSE),
                   "Placeholder",
                   "This icon is <b>placeholder</b>. It will be fixed</em>!")
          )  
        )
      })
    }
)

runApp(app)

enter image description here

stefan
  • 90,330
  • 6
  • 25
  • 51
  • Thanks stefan. This is html, correct? I keep promising to go to study W3 Schools to learn a bit about html, js, and css. – Village.Idyot Oct 26 '22 at 14:23
  • 1
    Well, no and yes. :D A tagList is R and is kind of list for html elements. But some knowledge of HTML, CSS and JS if of course useful whether you do shiny or rmarkdown or web scraping, e.g. it's good to know that spans are placed inline or on one line while e.g. p's and div's will be placed on new or separate lines. – stefan Oct 26 '22 at 14:37