Tooltips for a dropdown list in Shiny
[This article was first published on Saturn Elephant, and kindly contributed to R-bloggers]. (You can report issue about the content on this page here)
Want to share your content on R-bloggers? click here if you have a blog, or here if you don't.
Want to share your content on R-bloggers? click here if you have a blog, or here if you don't.
Here is how to have some tooltips for the options and their headers of a
selectizeInput in Shiny.
library(shiny)
ui <- fluidPage(
selectizeInput(
inputId = "selectAnimals",
label = "Select some animals",
choices = NULL,
multiple = TRUE,
options = list(
options = list(
list(
species = "mammal", value = "dog", name = "Dog",
tooltip = "it's a pet"
),
list(
species = "mammal", value = "cat", name = "Cat",
tooltip = "another pet"
),
list(
species = "mammal", value = "kangaroo", name = "Kangaroo",
tooltip = "it jumps"
),
list(
species = "bird", value = "duck", name = "Duck",
tooltip = "like Donald"
),
list(
species = "bird", value = "ostrich", name = "Ostrich",
tooltip = "very tasty"
),
list(
species = "bird", value = "seagull", name = "Seagull",
tooltip = "it's a seabird"
),
list(
species = "reptile", value = "snake", name = "Snake",
tooltip = "it has no leg"
),
list(
species = "reptile", value = "lizard", name = "Lizard",
tooltip = "mainly carnivorous"
),
list(
species = "reptile", value = "turtle", name = "Turtle",
tooltip = "it is slow"
)
),
optgroups = list(
list(
value = "mammal", label = "Mammal", tooltip = "like us"
),
list(
value = "bird", label = "Bird", tooltip = "they fly"
),
list(
value = "reptile", label = "Reptile", tooltip = "not only snakes"
)
),
optgroupField = "species",
labelField = "name",
render = I(
"{
optgroup_header: function(data, escape) {
return '<div class=\"optgroup-header\"><span ' +
'title=\"' + data.tooltip + '\">' + escape(data.label) +
'</span></div>';
},
option: function(data, escape) {
return '<div class=\"option\"><span ' +
title=\"' + data.tooltip + '\">' + escape(data.name) +
'</span></div>';
}
}"
)
)
)
)
server <- function(input, output, session) {}
shinyApp(ui, server)
It’s also possible to have Bootstrap tooltips. They are prettier, and
customizable. To do so, replace the render option with the
following one (that could differ if you use Bootstrap 5) and add this
onDropdownOpen option and this
onChange options to initialize them or reinitialize them:
render = I(
"{
optgroup_header: function(data, escape) {
return '<div class=\"optgroup-header\"><span ' +
'data-toggle=\"tooltip\" data-placement=\"right\" title=\"' +
data.tooltip + '\">' + escape(data.label) + '</span></div>';
},
option: function(data, escape) {
return '<div class=\"option\"><span ' +
'data-toggle=\"tooltip\" data-placement=\"top\" title=\"' +
data.tooltip + '\">' + escape(data.name) + '</span></div>';
}
}"
),
onDropdownOpen = I(
"function() {
setTimeout(function(){$('[data-toggle=tooltip]').tooltip();}, 100);
}"
),
onChange = I(
"function() {
setTimeout(function(){$('[data-toggle=tooltip]').tooltip();}, 100);
}"
)
To leave a comment for the author, please follow the link and comment on their blog: Saturn Elephant.
R-bloggers.com offers daily e-mail updates about R news and tutorials about learning R and many other topics. Click here if you're looking to post or find an R/data-science job.
Want to share your content on R-bloggers? click here if you have a blog, or here if you don't.