add popovers to shiny app?

Question

I would like to add a (?) next to the title of a widget so that the user can hover or click it and get extra information and a link they can click.

This is what I have right now:

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

But it is far from perfect. For example the placement of the (?) is not next to "File input" and to close the popover you have to click the question mark again instead of having an (x) in the popover.

You will have to modify the `h4` of label with some html and js code I think. This issue may be helpful (the last post): https://github.com/ebailey78/shinyBS/issues/26 — Gopala, May 05 '16 at 13:24

score 18 · Accepted Answer · answered May 11 '16 at 08:09

this answer is probably not what you initially wanted, but it could still be working for you.

You said you wanted the tooltip question mark next to the label, so I put it into the label. With the correct alignment. Second, you wanted the tooltip not to be open until the button is clicked again, because this is irritating. The popover option "focus" then might be the right thing for you.

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

score 0 · Answer 2 · edited May 23 '17 at 12:22

0

I don't know much about JS either but this post has helped me a lot with 'styling' shinyapps.

One way to display widgets in the same line is to put each of them inside a div with 'style:inline-block'. Because the fileInput is too large, the (?) keeps being moved to next line, so you can forcibly tell how much space will the fileInput occuppy with 'width: somepercetage%' or 'width: somepixels px'.

Following these ideas the code would look like this:

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

edited May 23 '17 at 12:22

Community

1
1

answered May 09 '16 at 19:04

user5029763

1,903
1
15
23

The question mark on your solution is weirdly placed, http://screenshot.net/1r4yjs5 – Ignacio May 10 '16 at 01:57
In Rstudio Viewer things were working fine but things do really get messy in a browser. I've edited my answer with `'vertical-align: middle'` in (?)'s div and it should look fine now. – user5029763 May 10 '16 at 13:30
You could align both divs at bottom too. Here is a link with other possibilities: http://www.w3schools.com/cssref/pr_pos_vertical-align.asp – user5029763 May 10 '16 at 13:34
is very close to what i was hoping for but the question mark is awkwardly positioned. Is there a way to move it next to `File input`. @Gopala mentioned something about using `HTML` to replace the `h4` but I cannot figure out how :(. Thanks! – Ignacio May 10 '16 at 22:12
I tested the code with the vertical-align in a couple of browser and this wasnt happening anymore... I've added the prt screen of the Chrome test. Did yours looked different? – user5029763 May 10 '16 at 23:54
Oh! I think my previous comment ended being misleading. In the comment I only mentioned adding vertical-align in the (?)' div. But if you look closely, I added to fileInput's div too. – user5029763 May 11 '16 at 03:22

add popovers to shiny app?

2 Answers2

Linked