将弹出窗口添加到闪亮的应用程序？

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)。

Answer 1

这个答案可能不是你最初想要的，但它仍然可以为你工作。

你说你想要标签旁边的工具提示问号，所以我把它放在标签里。使用正确的对齐方式。 其次，您希望在再次单击按钮之前不打开工具提示，因为这很烦人。那么弹出选项“焦点”可能适合您。

## 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)

Answer 2

我对 JS 也不太了解，但 this post 在“设计”闪亮应用方面帮助了我很多。

在同一行中显示小部件的一种方法是将它们中的每一个放在带有“style:inline-block”的 div 中。因为fileInput太大，(?)一直被移到下一行，所以可以通过'width: somepercetage%'或'width: somepixels px'强行判断fileInput占用多少空间。

按照这些想法，代码将如下所示：

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")
    )
  )
)