How to use Tooltip with virtualSelectInput in R Shiny to show filter values if text is long and hidden by ellipsis

Question

I've a R shiny application in which I am using virtualSelectInput to show list of values for my filter. But some of my text values are long and the dropbox hides them by ellipsis(...).

I see that the Virtual Select documentation mentions using Tooltip for displaying these long values while hovering cursor during value selection. But I couldn't figure out a way to use it in R Shiny.

I also found that R shiny has another function called tooltipOptions from same shinyWidgets library to show tooltip for a dropdown menu button. But again, there isn't any usage example.

I tried using it in below form through a dummy shiny app -

library(shiny)
library(shinyWidgets)

options <- c(
  "This is short text",
  "This is a longer text",
  "This is a very very very very long text",
  "This is a super ultra pro max very very very very long text"
)

ui <- fluidPage(
  titlePanel("Virtual Select Input Example"),
  
  virtualSelectInput("selected_option", "Select Digital Thread:", choices = options, 
                     multiple = TRUE, search = TRUE, searchNormalize = TRUE, position = "auto", dropboxWidth = "250px", 
                     showSelectedOptionsFirst = TRUE, placeholder = "All", markSearchResults = TRUE, selectAllOnlyVisible = TRUE,
                     tooltipOptions = tooltipOptions(placement = "right", title = "Params", html = FALSE)),
  
  textOutput("selected_value")
)

server <- function(input, output, session) {
  output$selected_value <- renderText({
    paste("You selected:", input$selected_option)
  })
}

shinyApp(ui, server)

But it doesn't work. I know I am not correctly using these together, so I would appreciate if someone can guide on using it either through this or any other simple way. I am not very inclined towards using a custom css or js code because in my real application I have Virtual Select at almost 100 different places.

Answer 1

There are three things to do:

• the virtual-select JavaScript library has been updated yesterday in shinyWidgets, and you have to install this version (remotes::install_github("dreamRs/shinyWidgets"));
• you have to set the option showValueAsTags = TRUE;
• you have to download tooltip.min.js and tooltip.min.css here, include them in the www subfolder of your app and then:

ui <- fluidPage(
  tags$head(
    tags$scrip(src = "tooltip.min.js"),
    tags$link(rel = "stylesheet", href = "tooltip.min.css")
  ),
  titlePanel("Virtual Select Input Example"),

  virtualSelectInput(
    "selected_option", "Select Digital Thread:", choices = options,
    multiple = TRUE,
    showValueAsTags = TRUE),
  ......

I'm going to inform the author of shinyWidgets that these two additional files should be added in the package.