Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
thothal opened this issue May 14, 2020 · 0 comments · May be fixed by #125
Open

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

thothal opened this issue May 14, 2020 · 0 comments · May be fixed by #125

Comments

@thothal
Copy link

thothal commented May 14, 2020

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:

shinyBS/inst/www/shinyBS.js

Lines 222 to 238 in c329f8c

// Makes adjustments to the tooltip and popover targets for specialized
// shiny inputs/outputs
shinyBS.getTooltipTarget = function(id) {
var $id = $("#" + id).closest(".shiny-input-container, .shiny-bound-output, .btn, .shiny-download-link");
/*
if($id.hasClass("js-range-slider")) {
$id = $id.parent();
} else if($id.hasClass("selectized")) {
$id = $id.siblings("div.selectize-control")
}
*/
return $id;
}

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.

thothal pushed a commit to thothal/shinyBS that referenced this issue May 14, 2020
Up to now, an element has to have an 'id' attribute to be able to get
an popover/tooltip. This was hardcoded in the underlying Javascript. A
new parameter was added to add[Tooltip|Popover] to override the default
behaviour to look for the element by id. With this flag set, the user
can provide an arbitrary jQuery selector as 'id'.

The argument name 'id' is maybe misleading in this case, but this
approach seemed to be minimal evasive and should not be breaking old
code.

Closes: ebailey78#124
@thothal thothal linked a pull request May 14, 2020 that will close this issue
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant