skip to Main Content

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.

2

Answers


  1. One option to do this, is increasing the size of dropboxWidth to 500px. And then you can have this result:

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

    enter image description here

    Login or Signup to reply.
  2. 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.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search