displaying help options to users

[Abhishek Pratap]

Hi Guys

In the app we are trying to develop we would like to provide some text
as help to few of the options and would not like the text to be
displayed by default as it uses the screen real estate.

Ideally it would be nice to show a question mark next to the
option/variable and when user clicks on it the help/text is displayed.

Just wondering if something like this could be done..and yes I am have
no real practical experience with JS/jQuery.

Appreciate any help.

For short term I tried the tooltip but that too dint seem to work.


###ui.R

shinyUI( pageWithSidebar(
#application title
headerPanel("Hello Shiny!"),
sidebarPanel(
tags$textarea(id="custom_input",rows=5,cols=100,c(1,2,3)),
tags$div(title='this is test',sliderInput('t','label',1,100,50))
),
#define the main panel
mainPanel(
h4('testing change in user text input area'),
textOutput('output')
)
))



####server.R
shinyServer(function(input,output,session){
output$output <- renderText({
usertext()
})
usertext <- reactive({
input$custom_input
})

})

[Vincent Nijs]

I have a crude but working solution. Suppose your help text is in markdown format add something like following in ui.R

helpModal('Help','myhelp',includeMarkdown("help/myhelp.md"))

and place the function below in global.R

helpModal <- function(title, link, content) {

  html <- sprintf("<div id='%s' class='modal hide fade in' style='display: none; '>

                     <div class='modal-header'><a class='close' data-dismiss='modal' href='#'>&times;</a>

                       <h3>%s</h3>

                     </div>

                     <div class='modal-body'>%s</div>

                   </div>

                   <a data-toggle='modal' href='#%s' class='icon-question-sign'></a>", link, title, content, link)

  Encoding(html) <- 'UTF-8'

  HTML(html)

}

change to includeHTML if you want to use an html file

[Stéphane Laurent]

I'm really interested about this too. 

I have recently found an interesting thread in stackoverflow about adding popups in a Shiny app: http://stackoverflow.com/questions/19172904/r-shiny-package-add-a-popup-with-error-warning

But I have never tried yet.

[Vincent Nijs]

ZJ has an alert example at: https://github.com/xiaodaigh/shinyalert-example

My approach uses a bootstrap modal which is built into shiny. See example here: http://vnijs.rady.ucsd.edu:3838/marketing/

You can also use a popover but they are more limited in what they can display than modals but if you only need a very brief description this might work:

https://groups.google.com/forum/?fromgroups=#!searchin/shiny-discuss/popover/shiny-discuss/iUkKPKhcqmM/84oZQnrXCWUJ

[Jin Rou New]

What you're looking for sounds like what's already implemented here by Matt Leonawicz: http://spark.rstudio.com/uafsnap/ak_daily_precipitation/

His source code is available on github, so looking at that might help.

[Stéphane Laurent]

I'm still interested but I have not found yet the time to study Matt Leonawicz's code in order to know how he does for the tooltips. 

Has anyone have a shorter example ?

[ZJ]

Matt Leonawicz's tooltip doesn't work in Chrome but works in Firefox. Werid.

[Claude Boivin]

I tried a help function from Joe Cheng which works on Chrome as well on Firefox. see this gist:

https://gist.github.com/jcheng5/5913297

[Stéphane Laurent]

I think this is the function used by Matt Leonawicz (at least he uses a function having the same name). 

Do you know an example showing how to use it ?

[Claude Boivin]

I sourced the function in ui.R, then I called it this way in the sidebarPanel section of ui.R:

div(class="row-fluid",

      div(class="span8",h4("subject")),

div(class="span1",helpPopup("help_title,includeHTML("www/help_entrer_fait.html"),placement='bottom',trigger='click'))

I put my html file (help_entrer_fait.html) in a www folder in my shiny app.

[Claude Boivin]

Sorry, but I hit the wrong key before ending my message. I have also a question. How do we do to adjust the width of the help window?. I have already linked a css file in my help file, but that does'nt work.

Thanks!

[Stéphane Laurent]

Works perfectly. Thanks !

[Claude Boivin]

Good. If you find how to vary the width of the help window, that would be greatly appreciated.

[Vincent]

@Clause Put the following in your css file. 

.popover { 

  width: 600px; 

  position: relative; top: -75px !important; 

  left: 320px !important; 

}

As an alternative you may want to take a look at using a modal. See my post here https://groups.google.com/forum/?fromgroups=#!topic/shiny-discuss/iUkKPKhcqmM

To see what it looks like click the ? icon on any page here: http://vnijs.rady.ucsd.edu:3838/marketing/

[Stéphane Laurent]

Hello Vincent,

 Thanks for this. Please have you find how to use Mathjax in helpPopup ?

[Vincent]

I use a bootstrap modal and not a popup. That is what I was referring to in my post. As far as I know you cannot put Mathjax math in a popup.

[Claude Boivin]

Hello Vincent,

The css tip works great. Just adjusted the "top" parameter to -800px to keep the help window in my main window. The modal solution is a nice one for long texts. In my case, I put shorter texts, and I don’t want that the main page be masked.

Thank’s a lot.

[Vincent]

I agree Claude. For a 1 or 2 line help popup is better. However, if you need something longer (perhaps with math) a modal probably works better.