Changer la largeur d'un bsPopover dans Shiny

Question

Je viens de commencer à utiliser R-Shiny. Mais j'ai quelques problèmes en utilisant js et le code html dans Shiny.

Dans mon application, j'ai deux bsButton qui montrent un texte avec hover bsPopover. Un de ces popover contient une image qui est plus grande que la boîte standard du popover et je voudrais définir la largeur de ce popover qui contient entièrement la figure.

Here J'ai trouvé comment régler la largeur et la hauteur de tous les popovers, mais comment puis-je régler la largeur/hauteur d'un popover spécifique?

C'est mon code à ce jour et je voudrais changer la largeur de bsPopover(id="q2", ...) mais pas la largeur de bsPopover(id="q1", ...):

library(shiny) 
library(shinyBS) 

ui <- fluidPage(

    tags$head(
    # this changes the size of the popovers 
    tags$style(".popover{width:200px;height:250px;}") 
), 

    fluidRow(
    fileInput("file", label=h4("Upload Data", 
           tags$style(type = "text/css", "#q1 {vertical-align: top;}"), 
           bsButton("q1", label="", icon=icon("question"), style="info", size="extra-small")), 
       accept=".txt" 
    ),    

    bsPopover(id="q1", title="Title help text1", 
     content=paste("help text"), 
     placement = "right", 
     trigger = "hover", 
     options = list(container = "body") 
    ), 

    numericInput("numIn", label = h4("Choose a value", 
            tags$style(type="text/css", "#q2 {vertical-align: top;}"), 
            bsButton("q2", label="", icon=icon("question"), style="info", size="extra-small")), 
       value = 2.5, step=0.5), 

    bsPopover(id="q2", title="Title help text 2", 
     content=paste0("The figure below shows", 
        img(src='scenarios.png', align = "center", height="320px", width="800px", style="display:block;margin-top:20px;margin-left:auto;margin-right:auto;") 

    ), 
     placement = "right", 
     trigger = "hover", 
     options = list(container = "body") 
    ) 
) 
) 

server <- function(input, output) {} 

shinyApp(ui = ui, server = server) 

Answer 1

Il suffit de remplacer

tags$style(".popover{width:200px;height:250px;}") 

avec

tags$style("#q2{width:200px;height:250px;}")