Add possibility to select arbitrary elements

DESCRIPTION

@@ -11,4 +11,5 @@ Imports:
     htmltools
 URL: https://ebailey78.github.io/shinyBS
 BugReports: https://github.com/ebailey78/shinyBS/issues
-License: GPL-3
+License: GPL-3
+RoxygenNote: 7.1.0

NAMESPACE

@@ -1,4 +1,4 @@
-# Generated by roxygen2 (4.1.0): do not edit by hand
+# Generated by roxygen2: do not edit by hand
 
 export(addPopover)
 export(addTooltip)

R/Tooltips_and_Popovers.R

@@ -117,9 +117,9 @@ NULL
 
 ## These Functions are common to multiple tooltip and popover functions
 # Shared functions with really long names...
-createTooltipOrPopoverOnServer <- function(session, id, type, options) {
+createTooltipOrPopoverOnServer <- function(session, id, type, options, treatAsJQSel) {
 
-  data <- list(action = "add", type = type, id = id, options = options)
+  data <- list(action = "add", type = type, id = id, options = options, treatAsJQSel = treatAsJQSel)
   session$sendCustomMessage(type = "updateTooltipOrPopover", data)
 
 }

R/addPopover.R

@@ -12,15 +12,18 @@
 #'@param trigger What action should cause the popover to appear? (\code{hover},
 #'\code{focus}, \code{click}, or \code{manual}). Defaults to \code{hover}.
 #'@param options A named list of additional options to be set on the popover.
-#'
+#'@param treatAsJQSel if \code{TRUE}, \code{id} is treated as a general jQuery selector
+#'rather than the id attribute of the element. This allows adding the popover to HTML
+#'elements even if they do not have an id attribute attached to it.
 #'@templateVar item_name addPopover
 #'@templateVar family_name Tooltips_and_Popovers
 #'@template item_details
 #'@template footer
 #'@export
-addPopover <- function(session, id, title, content, placement = "bottom", trigger = "hover", options = NULL) {
+addPopover <- function(session, id, title, content, placement = "bottom", trigger = "hover", 
+                       options = NULL, treatAsJQSel  = FALSE) {
 
   options <- buildTooltipOrPopoverOptionsList(title, placement, trigger, options, content)
-  createTooltipOrPopoverOnServer(session, id, "popover", options)
+  createTooltipOrPopoverOnServer(session, id, "popover", options, treatAsJQSel)
 
 }

R/addTooltip.R

@@ -11,15 +11,19 @@
 #'@param trigger What action should cause the tooltip to appear? (\code{hover},
 #'\code{focus}, \code{click}, or \code{manual}). Defaults to \code{"hover"}.
 #'@param options A named list of additional options to be set on the tooltip.
+#'@param treatAsJQSel if \code{TRUE}, \code{id} is treated as a general jQuery selector
+#'rather than the id attribute of the element. This allows adding the popover to HTML
+#'elements even if they do not have an id attribute attached to it.
 #'
 #'@templateVar item_name addTooltip
 #'@templateVar family_name Tooltips_and_Popovers
 #'@template item_details
 #'@template footer
 #'@export
-addTooltip <- function(session, id, title, placement = "bottom", trigger = "hover", options = NULL) {
+addTooltip <- function(session, id, title, placement = "bottom", trigger = "hover", 
+                       options = NULL, treatAsJQSel  = FALSE) {
 
   options <- buildTooltipOrPopoverOptionsList(title, placement, trigger, options)
-  createTooltipOrPopoverOnServer(session, id, "tooltip", options)
+  createTooltipOrPopoverOnServer(session, id, "tooltip", options, treatAsJQSel)
 
 }

inst/examples/TooltipsandPopovers/server.R

@@ -24,6 +24,15 @@ shinyServer(
          "This button is pointless too!")
      )
    })
+   addPopover(session, "#rdb .radio > label:first", 
+              "Add [Popover|Tooltip] to sub elements",
+              content = paste0("You can use arbitrary jQuery selectors to add ",
+                               "popovers/tooltips to elements even if they do not ",
+                               "have an 'id' attribute. Use the ", code("treatAsJQSel"),
+                               " flag to select an element by a jQuery selector rather than an ",
+                               "id. Here we used ", code("#rdb .radio > label:first"), 
+                               " to select the first label of the radio buttons group."),
+              treatAsJQSel = TRUE)
    addPopover(session, "distPlot", "Data", content = paste0("<p>Waiting time between ",
      "eruptions and the duration of the eruption for the Old Faithful geyser ",
      "in Yellowstone National Park, Wyoming, USA.</p><p>Azzalini, A. and ",

inst/examples/TooltipsandPopovers/ui.R

@@ -8,6 +8,9 @@ library(shinyBS)
                    min = 1,
                    max = 50,
                    value = 30),
+       radioButtons("rdb", "Popover at a sub element",
+                    choices = c("Popover should appear here", 
+                                "But not here")),
        selectInput("pointlessSelect", "Pointless Select", choices = c("A", "B", "C"), selectize = FALSE),
        bsTooltip("pointlessSelect", "This is another pointless input element, its just here to look pretty."),
        bsTooltip("bins", "The wait times will be broken into this many equally spaced bins",

inst/www/shinyBS.js

@@ -195,8 +195,8 @@ Shiny.addCustomMessageHandler("bsAlertClose", function(alertId) {
 // tooltips and popovers because there structure is so similar. type="popover"
 // will create a popover.
 
-shinyBS.addTooltip = function(id, type, opts) {
-  var $id = shinyBS.getTooltipTarget(id);
+shinyBS.addTooltip = function(id, type, opts, treatAsJQSel) {
+  var $id = shinyBS.getTooltipTarget(id, treatAsJQSel);
   var dopts = {html: true};
   opts = $.extend(opts, dopts);
 
@@ -210,8 +210,9 @@ shinyBS.addTooltip = function(id, type, opts) {
 
 }
 
-shinyBS.removeTooltip = function(id, type) {
-  var $id = shinyBS.getTooltipTarget(id);
+shinyBS.removeTooltip = function(id, type, treatAsJQSel) {
+  var $id = shinyBS.getTooltipTarget(id, treatAsJQSel);
+  console.log($id);
   if(type == "tooltip") {
     $id.tooltip("destroy");
   } else if(type == "popover") {
@@ -221,9 +222,13 @@ shinyBS.removeTooltip = function(id, type) {
 
 // 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");
+shinyBS.getTooltipTarget = function(id, treatAsJQSel) {
+  var $id;
+  if(!treatAsJQSel) {
+    $id = $("#" + id).closest(".shiny-input-container, .shiny-bound-output, .btn, .shiny-download-link");
+  } else {
+    $id = $(id);
+  }
 
 /*  
   if($id.hasClass("js-range-slider")) {
@@ -239,9 +244,9 @@ shinyBS.getTooltipTarget = function(id) {
 
 Shiny.addCustomMessageHandler("updateTooltipOrPopover", function(data) {
   if(data.action == "add") {
-    shinyBS.addTooltip(data.id, data.type, data.options);
+    shinyBS.addTooltip(data.id, data.type, data.options, data.treatAsJQSel);
   } else if(data.action == "remove") {
-    shinyBS.removeTooltip(data.id, data.type)
+    shinyBS.removeTooltip(data.id, data.type, data.treatAsJQSel)
   }
 })