如何向Shiny应用程序添加弹出窗口？

Question

我希望在小部件标题旁边添加一个(?)，这样用户就可以悬停或单击它以获取额外信息和可点击的链接。

目前我的代码如下：

## app.R ##
library(shiny)
library(shinydashboard)
library(shinyBS)
# Header
header <- dashboardHeader()
# Sidebar
sidebar <- dashboardSidebar(fileInput("chosenfile", label = h4("File input"), 
                                      accept = ".csv"),
                            bsButton("q1", label = "", icon = icon("question"),
                                     style = "info", size = "extra-small"),
                            bsPopover(id = "q1", title = "Tidy data",
                                      content = paste0("You should read the ", 
                                                       a("tidy data paper", 
                                                         href = "http://vita.had.co.nz/papers/tidy-data.pdf",
                                                         target="_blank")),
                                      placement = "right", 
                                      trigger = "click", 
                                      options = list(container = "body")
                                      )
                            )
# Body
body <- dashboardBody()
# ui
ui <- dashboardPage(header, sidebar, body)
# server
server <- function(input, output) {

}
# run
shinyApp(ui, server)

但它还远远不完美。例如，(?)的位置不在“文件输入”旁边，关闭弹出框需要再次点击问号，而不是在弹出框中有个（x）。

- Ignacio

---

你需要使用一些HTML和JS代码来修改标签的h4。这个问题可能会有所帮助（最后一篇帖子）：https://github.com/ebailey78/shinyBS/issues/26 - Gopala

谢谢@Gopala。唉，我不懂JS :( - Ignacio

Answer 1

这个答案可能不是你最初想要的，但它仍然可能对你有用。

你说你想要在标签旁边放置提示问号，所以我将其放入了标签中。并进行了正确的对齐。其次，你希望当按钮再次被点击之前，提示框不会打开，因为这很烦人。那么"focus"选项可能适合你。

## app.R ##
library(shiny)
library(shinydashboard)
library(shinyBS)
# Header
header <- dashboardHeader()
# Sidebar
sidebar <- dashboardSidebar(
  fileInput("chosenfile", 
    label = h4("File input ",
              tags$style(type = "text/css", "#q1 {vertical-align: top;}"),
              bsButton("q1", label = "", icon = icon("question"), style = "info", size = "extra-small")
            ),
    accept = ".csv"),
  bsPopover(id = "q1", title = "Tidy data",
    content = paste0("You should read the ", 
                a("tidy data paper", 
                  href = "http://vita.had.co.nz/papers/tidy-data.pdf",
                  target="_blank")
                ),
    placement = "right", 
    trigger = "focus", 
    options = list(container = "body")
  )
)
# Body
body <- dashboardBody()
# ui
ui <- dashboardPage(header, sidebar, body)
# server
server <- function(input, output) {}
# run
shinyApp(ui, server)

- K. Rohde

Answer 2

我对JS也不是很了解，但this post帮助我在“样式”闪亮应用程序方面受益匪浅。

将每个小部件放入一个带有“style:inline-block”的div中，可以在同一行中显示小部件。因为fileInput太大，所以（？）会被移到下一行，因此您可以强制指定fileInput将占用多少空间，例如“width:somepercetage％”或“width:somepixels px”。

按照这些思路，代码如下：

div(
  div(
    # edit1
    style="width:80%; display:inline-block; vertical-align: middle;",
    fileInput("chosenfile", label = h4("File input"), 
              accept = ".csv")
  ),
  div(
    # edit2
    style="display:inline-block; vertical-align: middle;",
    bsButton("q1", label = "", icon = icon("question"),
             style = "info"),
    bsPopover(id = "q1", title = "Tidy data",
              content = paste0("You should read the ", 
                               a("tidy data paper", 
                               href = "http://vita.had.co.nz/papers/tidy-data.pdf",
                                 target="_blank")),
              placement = "right", 
              trigger = "click", 
              options = list(container = "body")
    )
  )
)

- user5029763

---

你的解决方案中的问号位置很奇怪，http://screenshot.net/1r4yjs5 - Ignacio

在Rstudio Viewer中一切都很正常，但在浏览器中情况确实变得混乱了。 我已经在（？）的div中编辑了我的答案，加入了“vertical-align：middle”，现在应该看起来不错。 - user5029763

你也可以将两个div对齐到底部。这里有一个链接，介绍其他可能性：http://www.w3schools.com/cssref/pr_pos_vertical-align.asp - user5029763

非常接近我所期望的，但问号的位置有些尴尬。有没有办法将其移动到“文件输入”旁边。@Gopala提到使用“HTML”替换“h4”，但我无法弄清楚如何做:(。谢谢！ - Ignacio

我在几个浏览器中测试了代码，vertical-align的问题已经解决了...我附上了Chrome测试的截图。你的显示结果有不同吗？ - user5029763

哦！我觉得我之前的评论可能会误导人。在评论中，我只提到了在“？”的div中添加vertical-align。但是如果你仔细看，我也在fileInput的div中添加了它。 - user5029763