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.

Answer 1

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)

Answer 2

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