Looking at the code below, I was able to successfully align the bullet-point text in the popover when hovering over the information circle. However, I am still struggling to justify-align its header right above it, as seen in this image. When I remove the ul from the line
tags$style('.popover ul {padding: 15px; text-align: justify;}')https://i.stack.imgur.com/DMk19.png
Here's the code snippet:
library(shiny)
library(shinyBS)
ui <- fluidPage(
tags$style('.popover ul {padding: 15px; text-align: justify;}'),
br(),
uiOutput("uiExample")
)
server <- function(input, output, session) {
output$uiExample <- renderUI({
tagList(
tags$span("Little circle >>"),
tags$span(
popify(
icon("info-circle", verify_fa = FALSE),
"Placeholder",
paste(
"Here is an excerpt from a famous poem Still I Rise:",
"<ul>",
"<li>You may write me down in history With your bitter, twisted lies,</li>",
"<li>You may tread me in the very dirt. But still, like dust, I will rise.",
"Does my sassiness upset you...</li>",
"</ul>"
)
)
)
)
})
}
shinyApp(ui, server)