Question

我刚刚开始使用R-Shiny。但是我在Shiny中使用js和html代码时遇到了一些麻烦。

在我的应用中，我有两个bsButton，当悬停时会显示一些bsPopover的文字。其中一个popover包含一个大于popover标准框的图像，我想设置完全包含该图形的popover的宽度。

Here我找到了如何设置所有弹出窗口的宽度和高度，但是如何设置仅特定弹出窗口的宽度/高度？

这是我目前为止的代码，我想更改bsPopover(id="q2", ...)的宽度，而不是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

只需替换

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

带

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

Answer 2

尽管从同一tipify()包中使用popify()和shinyBS，但我一直在尝试解决相同的问题。我发现很难，因为似乎工具提示或弹出窗口的尺寸是由工具提示或弹出窗口所属的外部<div>容器定义的。因此，需要使用CSS进行操作才能解决。

我发现tippy::tippy()在这里很有用，可以在其中定义函数内工具提示的所需宽度，例如：

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

text参数需要使用字符串作为输入。那可能是您的按钮标题/文本。

我使用tippy在信息图标上显示了一个工具提示，该提示需要进行一些CSS调整：

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

在Shiny中更改一个bsPopover的宽度

2 个答案: