JohnCoene / tippy

💬 Tippy.js for Shiny
http://tippy.john-coene.com/
Other
76 stars 2 forks source link

tippyThis does not work with selectizeInput #16

Closed dmenne closed 3 years ago

dmenne commented 3 years ago

This is similar to #2, but I open a new issue because the other one is 3 years old.

tippyThis does not work with selectizeInput because of the complex component hiding this widget does. For an id of "phase", I also tried "tippyThis("phase-selectized"), but this also does not work.

Using tippy directly is fine, but I prefer to add all tippies like this:

tippy_text = tribble(
  ~id, ~text,
  "save", "Save temporarily",
...
) 
# Use tippy directly in ui for selectize boxes
# Call this function in ui
tippy_all = function() {
  invisible(apply(tippy_text, 1, function(x) tippyThis(x["id"], x["text"])))
}

shinyBS (which is no longer maintained) had a function to add/modify popup in server.R

JohnCoene commented 3 years ago

Yes, that is because in more recent versions of shiny selectInput uses selectize.js which modifies the DOM.

It's by no means ideal but right now the best/easiest is to use a wrapper for the selectInput.

library(shiny)
library(tippy)

ui <- fluidPage(
    h3("Select"),
    selectInput(
        'select', 
        'Select', 
        c('a', 'b'),
        selectize = FALSE
    ),
    tippyThis(
        "select",
        "SELECT"
    ),  
    h3("Selectize"),
    div(
        id = 'wrapper',
        selectInput(
            'select2', 
            'Select', 
            c('a', 'b')
        )
    ),
    tippyThis(
        "wrapper",
        "SELECT"
    )   
)

server <- function(input, output){

}

shinyApp(ui, server)
dmenne commented 3 years ago

Thanks for your idea. I used my method to unclutter the ui, and using an additional div ends up similar to tippy. However, the method you described is good when you want to adapt the tippy text dynamically, so it is worth remembering.