0

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

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

在这里，我找到了如何设置所有弹出框的宽度和高度，但是如何设置仅特定弹出框的宽度/高度？

到目前为止，这是我的代码，我想更改 的宽度，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)
4

2 回答 2

0

我一直在尝试解决同样的问题，尽管使用tipify()和popify()来自同一个shinyBS包。我发现它真的很难，因为似乎工具提示或弹出窗口的尺寸是由<div>工具提示或弹出窗口所属的外部容器定义的。因此需要操纵 withCSS来解决。

我发现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>"

于 2020-07-21T19:48:07.373 回答
0

只需更换

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

和

tags$style("#q2{width:200px;height:250px;}")
于 2017-10-05T16:27:28.043 回答