Change width of one bsPopover in Shiny

Question

I've just started using R-Shiny. But I have some of troubles using js and html code in Shiny.

In my app I have two bsButton which when hover show some text with bsPopover. One of these popover contains an image which is larger than the standard box of the popover and I'd like to set the width of this popover that fully contains the figure.

Here I found how to set the width and height of all popovers, but how can I set the width/height of only a specific popover?

This is my code so far and I'd like to change the width of bsPopover(id="q2", ...) but not the width of 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

I've been trying to solve the same issue, although using tipify() and popify() from the same shinyBS package. I found it really hard as it seems that dimensions of a tooltip or a pop-up are defined by the outer <div> container that tooltip or pop-up belongs to. Hence requires manipulation with CSS to resolve.

I found tippy::tippy() helpful here, where one could define the desired width of a tooltip inside a function, e.g.:

library(tippy)
tippy(
  text = "Show tooltip over this text",
  tooltip = "My tooltip text",
  width = "200px"
)

The text argument requires character string as an input. That could be your button title/text.

I used tippy to show a tooltip over an information icon, that required minor CSS tweaking:

text = "<i class='fas fa-info-circle'></i>"

Answer 2

Just replace

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

with

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