Adding a different tooltip to each pickerInput option with shinyBS

Question

I'm trying to add a tooltip to each sub option in a pickerinput dropdown menu. I've tried adapting the function selectizeTooltip from reactive radioButtons with tooltipBS in shiny but I'm afraid I don't know enough to adapt it correctly.

Unfortunately simply doing

        pickerInput("pobrezavar1", label = NULL,
                    choices = c("Riesgo de pobreza (60%)"= "Pobreza_60_",
                                "Extrema pobreza (40%)"= "Pobreza_40_"
                                #"Pobreza según definición EJ-GV"= "Pobreza_GV_"
                                ),
                    selected = NULL,
                    options = list(`noneSelectedText`="Escoge"),
                    width = "100%"),
        
        selectizeTooltip(id="pobrezavar1", choice = "Pobreza_60_", title = "Tooltip for c", placement = "right", trigger = "hover"),

does not work.

App I'm working on (you'll see that I've got tooltips on radioGroupButtons working correctly in the last row of buttons): http://iseak.shinyapps.io/Mapa2/

Thank you in advance for any tips you might have.

Nice app. There already are tooltips. You mean you want to change them? — Stéphane Laurent, Oct 15 '20 at 08:07
Those tooltips are for the groupradiobutton input (and they look/work great). I'd like the same thing but for the dropdown menus done with pickerinput. — Ainhoa, Oct 15 '20 at 13:50
This is not what I meant. There already is a tooltip for the *selected* option of the *pickerinput*. To have tooltips for the options when the menu is opened, see my answer. — Stéphane Laurent, Oct 15 '20 at 13:54

score 7 · Answer 1 · answered Oct 15 '20 at 08:33

7

Here is a way, without shinyBS.

library(shiny)
library(shinyWidgets)

js <- "
var mytips = ['HELLO I AM TOOLTIP 1', 'HI I AM TOOLTIP 2'];
$('#mypicker').on('shown.bs.select', function() {
  var $lis = $($(this).data('selectpicker').selectpicker.current.elements);
  $lis.each(function(i) {
    $(this).attr('title', mytips[i]);
  });
});"

ui <- fluidPage(
  
  pickerInput(
    inputId = "mypicker",
    label = "A label",
    choices = c("a", "b")
  ),
  
  tags$script(HTML(js)),
  
  verbatimTextOutput("value")
  
)

server <- function(input, output) {
  output$value <- renderPrint(input$mypicker)
}

shinyApp(ui, server)

answered Oct 15 '20 at 08:33

Stéphane Laurent

75,186
15
119
225

Thanks, that looks great, but it's weird, I can't get it to work on my app. Could it be that it's conflicting with something else?? – Ainhoa Oct 15 '20 at 14:01
@Ainhoa Perhaps you didn't change the id in the JS code? (the id starts with `#`, second line). – Stéphane Laurent Oct 15 '20 at 14:54
Yup I've changed that already. Hmmm I'll play around a bit more, see if I get it working, maybe it's a browser thing... Thanks again!! – Ainhoa Oct 15 '20 at 18:09
Hello @StéphaneLaurent, thank you for this. One question, what changes do I make for radioButtons? I am not using shinyBS so your solution would help me (I can also open a new question, please let me know) https://gist.github.com/TestingGround00/ec10566dc0114399a5dfff8a57dc1979 – AOE_player Apr 21 '21 at 18:09
1

@AOE_player see https://stackoverflow.com/q/36132204/1100107 – Stéphane Laurent Apr 22 '21 at 10:47

score 0 · Answer 2 · answered Jan 24 '22 at 22:23

Adding a few elements to Stephane's answer in case you want to map the variable of a dataset to the tooltip text using the {jsonlite} package:

library(jsonlite)

df_var <- jsonlite::toJSON(df$var, dataframe="values")

js <- paste("
var mytips = ", test, ";
$('#mypicker').on('shown.bs.select', function() {
  var $lis = $($(this).data('selectpicker').selectpicker.current.elements);
  $lis.each(function(i) {
    $(this).attr('title', mytips[i]);
  });
});", sep = "")

Adding a different tooltip to each pickerInput option with shinyBS

2 Answers2

Linked