How to format text using shiny html?

Question

In the example code at the bottom, I'm trying to format the text rendered inside the shinyBS package popify() function as shown in the image below (reduce bullet indentation and right justify the text). I believe this code uses shiny html. How could this be done?

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({
        tagList(
          tags$span("Little circle >>"),
          tags$span(
            popify(icon("info-circle", verify_fa = FALSE),
                   "Placeholder",
                   paste(
                   "This table below presents a whole bunch of great information so strap in:",
                   "<ul>",
                   "<li>Blah blah blah blah blah blah blah blah blah blah blah.</li>",
                   "<li>Blah blah blah blah blah blah blah blah blah blah blah.</li>",
                   "<li>Blah blah blah blah blah blah blah blah blah blah blah blah blah.</li>",
                   "<li>Blah blah blah blah blah blah blah blah blah blah blah blah.</li>",
                   "<li>Blah blah blah blah blah blah blah blah blah blah",
                    "Blah blah blah blah blah blah.</li>",
                   "</ul>")
            )
          )  
        )
      })
    }
)

runApp(app)

Answer 1

And incorporating Iz100's answer into the complete code with my desired formatting:

library(shiny)
library(shinyBS)

app = shinyApp(
  ui =
    fluidPage(
      tags$style('.popover ul {padding: 15px; text-align: justify;}'), # << Iz100 solution here
      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("Little circle >>"),
          tags$span(
            popify(icon("info-circle", verify_fa = FALSE),
                   "Placeholder",
                   paste(
                   "This table below presents a whole bunch of great information so strap in:",
                   "<ul>",
                   "<li>Blah blah blah blah blah blah blah blah blah blah blah.</li>",
                   "<li>Blah blah blah blah blah blah blah blah blah blah blah.</li>",
                   "<li>Blah blah blah blah blah blah blah blah blah blah blah blah blah.</li>",
                   "<li>Blah blah blah blah blah blah blah blah blah blah blah blah.</li>",
                   "<li>Blah blah blah blah blah blah blah blah blah blah",
                    "Blah blah blah blah blah blah.</li>",
                   "</ul>")
            )
          )  
        )
      })
    }
)

runApp(app)

Answer 2

Add this to your UI

            tags$style(
                '
                .popover ul {padding: 1px; text-align: right;}
                '
            )