ebailey78 / shinyBS

Twitter Bootstrap Components for Shiny
182 stars 47 forks source link

FR: Allow for adding popovers/tootips to arbitrary elements #124

Open thothal opened 4 years ago

thothal commented 4 years ago

This FR is inspired by this SO question [Disclaimer: I gave the accepted answer to it]. I found a workaround for this problem, yet I think it would be nice to support these kind of use cases out of the box.

Consider the following regex:

library(shiny)
library(shinyBS)

ui <- fluidPage(radioButtons("rdb", "Popover only over full element", 
                             c("But I want my popover here", "And not here")),
                bsButton("btn", "I am only here to load deps"))
server <- function(input, output, session) {
  addPopover(session, "rdb", "Sad Popover", "I am on the wrong place")
}
shinyApp(ui, server)

The popover is anchored at the div given by id rdb. If I want to have it anchored at the first option of the radioButton, I have to use some Javascript to add an id attribute:

library(shiny)
library(shinyBS)
library(shinyjs)

ui <- fluidPage(useShinyjs(),
  radioButtons("rdb", "Popover at the right place", 
                             c("Popover appears here", "But you need to know your JS")),
                bsButton("btn", "I am only here to load deps"))
server <- function(input, output, session) {
  runjs("$('#rdb .radio > label:first').attr('id', 'manual_id')")
  addPopover(session, "manual_id", "Still Sad Popover", 
             "I am on the right place, but my owner needs to know a bit of Javascript")
}
shinyApp(ui, server)

Looking at the code, the culprit can be found here:

https://github.com/ebailey78/shinyBS/blob/c329f8ce43e44579cafbb16fc3109fb69d403e57/inst/www/shinyBS.js#L222-L238

where we look for elements given by a fixed id.

This approach may be covering most of the use cases, yet it would be nice to allow for more flexibility, which should not be too hard to implement with an added flag telling Javascript to interpret id not as an id but as an arbitrary jQuery selector.

I will create a PR addressing this issue.