Search code examples
rshinytooltipuislidershinybs

single quote in string transforms sliderInput into numericInput when using shinyBS

I want to add tooltips to my action buttons or my sliders with the package shinyBS and a function tipify. I added a text for the "title" argument of the tooltip. However, when my text has an apostrophe (single quote), it gives an error. Which does not happen with the label of the actionButton itself!

library(shiny); library(shinyBS)
shinyApp(ui = basicPage(p("title"), uiOutput("button_with_tooltip"), uiOutput("input_slider")),
         server = function(input, output, session){
              output$button_with_tooltip = renderUI({
                   tipify(actionButton("button", label="I'm doing nothing"), title="I am doing nothing")})})

If you change the tooltip title from "I am" to "I'm", it won't display.

And even more surprising behaviour consequence of this error is with inputSlider, they transform themselves automatically into a numericInput when the title of the tooltip has a single quote in it... weird! Try this:

shinyApp(
     ui = basicPage(p("title"), uiOutput("input_slider")),
     server = function(input, output, session){
          output$input_slider = renderUI({
               tipify(sliderInput("slider", label="I'm a simple slider", min=0, max=10, value=5), title="I'm doing nothing")
          })})

Why does this happen and how can I override this? Thanks,

NB: I'm French so I do NEED apostrophes

Thanks,

Solution

  • Looks like this was a bug that was fixed in the latest version on GitHub:

    But the latest CRAN release is a little older (2015-03-31). I installed the latest version on GitHub and ran that app with no problem.

    devtools::install_github("ebailey78/shinyBS@shinyBS3")

    tipify adds a tooltip by embedding JavaScript on the page. The issue was that the JavaScript code was being constructed with single quoted strings, but the string content wasn't being escaped. That causes a JavaScript parsing error, which is why the slider looks like a plain <input> element.

    You can escape apostrophes with a backslash as @akrun showed, or HTML escape it with &#39;