How can I create a title for my verbatimTextOutput on my RShiny dashboard?

Question

I plan to have several verbatimTextOutputs on my RShiny dashboard. Therefore, to help the user, I'd like to make them distinctive by adding titles/names above them.

However, verbatimTextOutputs has no such argument, so I had a look at CSS styling which I am not particularly familiar with, so here I might have a mistake but it seemed to me I can't add a title to my object using CSS. I can do a whole bunch of other fancy stuff such as font types, colors, etc. though but that doesn't really solve my issue. Then I read I might need to tinker with JavaScript to add those titles above my outputs.

library(shiny)

ui <- fluidPage(
  actionButton("btn", "Press me"),

  verbatimTextOutput("dem"),
  tags$head(tags$style(HTML("
                            #dem { 
                            title: somefancyname;
                            width: 100px;
                            height: 45px;
                            position: relative;
                            }
                            ")))
)

server <- function(input, output, session) {

  observeEvent(input$btn, {
    output$dem <- renderText(1)
  })


}

shinyApp(ui, server)

Am I on the right track? Can someone please help me out whether what I'm trying to achieve is feasible and what should I do here? Thank you in advance.

Answer 1

You don't need the style tag, just add the title with an h2 or other heading tag... see ?tags

library(shiny)

ui <- fluidPage(
  actionButton("btn", "Press me"),
  tags$h2("Dem output"), ### Add one of these above any and all of your outputs...
  verbatimTextOutput("dem"),
  tags$head(tags$style(HTML("
                            #dem { 
                            title: somefancyname;
                            width: 100px;
                            height: 45px;
                            position: relative;
                            }
                            ")))
)

server <- function(input, output, session) {

  observeEvent(input$btn, {
    output$dem <- renderText(1)
  })


}

shinyApp(ui, server)