добавить popovers в блестящее приложение?

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) 

Но это далеко от совершенства. Например, размещение (?) Не является рядом с «Вводом файлов» и для закрытия popover вам нужно снова щелкнуть знак вопроса вместо того, чтобы иметь (x) в popover.

Answer 1

этот ответ, вероятно, не то, что вы изначально хотели, но она все еще может работать для вас.

Вы сказали, что хотите отметить вопросительный знак рядом с меткой, поэтому я поместил его в ярлык. Правильное выравнивание. Во-вторых, вы хотели, чтобы всплывающая подсказка не открывалась до тех пор, пока кнопка не будет нажата снова, потому что это раздражает. Опция popover «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) 

Answer 2

Я не знаю много о JS, но this post очень помог мне с 'styling' shinyapps.

Один из способов отображения виджетов в одной строке - поместить каждый из них в div с помощью «style: inline-block». Поскольку 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") 
    ) 
) 
)