I want the user to see a different tooltip when hovering over grouped choices in selectizeInput. This was solved here for a flat vector of choices. i.e. choices = c("a", "b", "c", "d"). The difference is I would like this to work for a nested list of inputs, i.e. choices = list(first= c("a", "b"),second = c("c", "d"))
Here is an example that works for a flat vector of choices:
library(shiny)
library(shinyBS)
selectizeTooltip <- function(id, choice, title, placement = "bottom", trigger = "hover", options = NULL){
options = shinyBS:::buildTooltipOrPopoverOptionsList(title, placement, trigger, options)
options = paste0("{'", paste(names(options), options, sep = "': '", collapse = "', '"), "'}")
bsTag <- shiny::tags$script(shiny::HTML(paste0("
$(document).ready(function() {
var opts = $.extend(", options, ", {html: true});
var selectizeParent = document.getElementById('", id, "').parentElement;
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation){
$(mutation.addedNodes).filter('div').filter(function(){return(this.getAttribute('data-value') == '", choice, "');}).each(function() {
$(this).tooltip('destroy');
$(this).tooltip(opts);
});
});
});
observer.observe(selectizeParent, { subtree: true, childList: true });
});
")))
htmltools::attachDependencies(bsTag, shinyBS:::shinyBSDep)
}
ui <- shinyUI(
fluidPage(
selectizeInput(inputId = "lala", label = "Label!", choices = c("a", "b", "c", "d")), # This changes in second example
selectizeTooltip(id = "lala", choice = "a", title = "Tooltip for a", placement = "right"),
selectizeTooltip(id = "lala", choice = "b", title = "Tooltip for b", placement = "right"),
selectizeTooltip(id = "lala", choice = "c", title = "Tooltip for c", placement = "right"),
selectizeTooltip(id = "lala", choice = "d", title = "Tooltip for d", placement = "right")
)
)
server <- function(input, output, session){
observeEvent(input$lala,{
print(input$lala)
})
}
shinyApp(ui, server)
Here is the example that I want to get working
library(shiny)
library(shinyBS)
selectizeTooltip <- function(id, choice, title, placement = "bottom", trigger = "hover", options = NULL){
options = shinyBS:::buildTooltipOrPopoverOptionsList(title, placement, trigger, options)
options = paste0("{'", paste(names(options), options, sep = "': '", collapse = "', '"), "'}")
bsTag <- shiny::tags$script(shiny::HTML(paste0("
$(document).ready(function() {
var opts = $.extend(", options, ", {html: true});
var selectizeParent = document.getElementById('", id, "').parentElement;
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation){
$(mutation.addedNodes).filter('div').filter(function(){return(this.getAttribute('data-value') == '", choice, "');}).each(function() {
$(this).tooltip('destroy');
$(this).tooltip(opts);
});
});
});
observer.observe(selectizeParent, { subtree: true, childList: true });
});
")))
htmltools::attachDependencies(bsTag, shinyBS:::shinyBSDep)
}
ui <- shinyUI(
fluidPage(
selectizeInput(inputId = "lala", label = "Label!", choices = list(`first` = c("a", "b"),
`second` = c("c", "d"))), # this is different
selectizeTooltip(id = "lala", choice = "a", title = "Tooltip for a", placement = "right"),
selectizeTooltip(id = "lala", choice = "b", title = "Tooltip for b", placement = "right"),
selectizeTooltip(id = "lala", choice = "c", title = "Tooltip for c", placement = "right"),
selectizeTooltip(id = "lala", choice = "d", title = "Tooltip for d", placement = "right")
# selectizeTooltip(id = "lala", choice = "first.a", title = "Tooltip for a", placement = "right"),
# selectizeTooltip(id = "lala", choice = "first.b", title = "Tooltip for b", placement = "right"),
# selectizeTooltip(id = "lala", choice = "second.c", title = "Tooltip for c", placement = "right"),
# selectizeTooltip(id = "lala", choice = "second.d", title = "Tooltip for d", placement = "right")
)
)
server <- function(input, output, session){
observeEvent(input$lala,{
print(input$lala)
})
}
shinyApp(ui, server)
I tried changing my choice to be id.choice (first.a) for example with no luck. I also tried bsTooltip with no luck. It appears that this function only allows you to have one tooltip whereas I need a tooltip for each choice in the selectizeInput.
I am open to different solutions like changing the structure of the choices in selectizeInput or using a different selector input, though I would like to be able to have groups of choices in any case. Or modifying the JS portion so it will recognize what I am looking for.
Thanks!
