在 Shiny 中更改一个 bsPopover 的宽度答案

【问题标题】：Change width of one bsPopover in Shiny在 Shiny 中更改一个 bsPopover 的宽度
【发布时间】：2018-03-17 00:56:49
【问题描述】：

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

在我的应用程序中，我有两个bsButton，当悬停时会显示一些带有bsPopover 的文本。其中一个弹出框包含一个大于弹出框标准框的图像，我想设置此弹出框的宽度以完全包含该图。

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)

【问题讨论】：

标签： shiny shinybs

【解决方案1】：

只需替换

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

与

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

【讨论】：

感谢您的回答。不幸的是，这会改变按钮的大小
但不是弹出框的大小。

【解决方案2】：

我一直在尝试解决同样的问题，尽管使用了同一个 shinyBS 包中的 tipify() 和 popify()。我发现它真的很难，因为似乎工具提示或弹出窗口的尺寸是由工具提示或弹出窗口所属的外部 <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>"

【讨论】：