R Shiny group buttons with individual hover dropdown selection

Question

I wish to make radioGroupbuttons show a dropdown menu for each member of the group buttons upon hover. The left click functionality of the button is already utilized for another purpose. I have the following code using a bspopover for showing text instead of the dropdown upon hover. The bspopover is not working correctly even for the plain text here. Any suggestions to fix this would be appreciated. The solution I need for hover dropdown for each button A B C could be different than what I have tried here with radioGroupButtons and bspopover.If you have an alternate way, please share. Thanks!

How to make Twitter Bootstrap menu dropdown on hover rather than click has a twitterbootstrap solution which looks relevant but I am not familiar with JS yet.

library(shiny)
library(shinyWidgets)
library(shinyBS)

  ui =
    fluidPage(
        radioGroupButtons(inputId = "somevalue1",individual=T,label = "Make a choice: ",choices = c("A", "B", "C")),
        verbatimTextOutput("value1")
      )
  server =
    function(input, output, session) {
      addPopover(session, "somevalue1", "Data", content = paste0("This wasn't easy"), trigger = 'hover')
      # wish to make the content above a dropdown selection, say between apple and banana for each choice A B C.
    }
  shinyApp(ui, server)

Worked like a charm. Stéphane, thanks for the JS fix. That was very quick, much appreciated. — Rppa, Aug 10 '20 at 16:45

Stéphane Laurent · Accepted Answer · 2020-08-20T09:15:45.760

Here is a way using the qTip2 JavaScript library.

In order to use it, you have to download the files jquery.qtip.min.css and jquery.qtip.min.js, and put these two files in the www subfolder of the Shiny app.

library(shiny)
library(shinyWidgets)

js <- "
$(document).ready(function(){

  $('#THE_INPUT_ID .radiobtn').each(function(i, $el){
    var selector = '#select' + (i+1);
    $(this).qtip({
      overwrite: true,
      content: {
        text: $(selector)
      },
      position: {
        my: 'top left',
        at: 'bottom right'
      },
      show: {
        ready: false
      },
      hide: {
        event: 'unfocus'
      },
      events: {
        blur: function(event, api) {
          api.elements.tooltip.hide();
        }
      },
      style: {
        classes: 'qtip-blue qtip-rounded'
      }
    });
  });

});
"

ui <- fluidPage(

  tags$head(
    tags$link(rel = "stylesheet", href = "jquery.qtip.min.css"),
    tags$script(src = "jquery.qtip.min.js"),
    tags$script(HTML(js))
  ),

  br(),

  radioGroupButtons(
    inputId = "THE_INPUT_ID",
    individual = TRUE,
    label = "Make a choice: ",
    choices = c("A", "B", "C")
  ),

  br(), br(), br(),

  verbatimTextOutput("selection1"),
  verbatimTextOutput("selection2"),
  verbatimTextOutput("selection3"),

  div(
    style = "display: none;",
    selectInput(
      "select1",
      label = "Select a fruit",
      choices = c("Apple", "Banana"),
      selectize = FALSE
    ),
    selectInput(
      "select2",
      label = "Select a fruit",
      choices = c("Lemon", "Orange"),
      selectize = FALSE
    ),
    selectInput(
      "select3",
      label = "Select a fruit",
      choices = c("Strawberry", "Pineapple"),
      selectize = FALSE
    )
  )

)

server <- function(input, output, session) {

  output[["selection1"]] <- renderPrint(input[["select1"]])
  output[["selection2"]] <- renderPrint(input[["select2"]])
  output[["selection3"]] <- renderPrint(input[["select3"]])

}

shinyApp(ui, server)

EDIT

To observe which button is hovered over, add this show option to the events option:

    events: {
      blur: function(event, api) {
        api.elements.tooltip.hide();
      },
      show: function(event, api) {
        Shiny.setInputValue('hovered', value);
      }
    }

Then the hovered button is in the input[["hovered"]] variable.

A minor observation: label = "Select a fruit" is not showing. — Rppa, Aug 10 '20 at 17:23
@Rppa Yeah, right. Replace `text: $(selector)` with `text: $(selector).parent().parent()` if you want the labels to appear. — Stéphane Laurent, Aug 10 '20 at 18:03
I want to conditionally updateRadioGroupButtons in the server code, how would I adjust the dropdowns accordingly? Say, observeEvent(input$select1, { if(input$select1=='Apple'){ updateRadioGroupButtons( session, inputId = "THE_INPUT_ID", label = "Make NEW choice: ", choices = c('D',"A")) }) # say different choices pear and peach are needed for D. — Rppa, Aug 11 '20 at 09:50
Thanks Stéphane! Here is the new followup.https://stackoverflow.com/questions/63381072/in-shiny-need-to-dynamically-update-dropdown-choices-with-updateradiogroupbutton — Rppa, Aug 12 '20 at 16:39
Is there a way to observe which button is being hovered over even if the button is not clicked? — Rppa, Aug 20 '20 at 00:22
@Rppa Yes, see my edit. By the way, why did you uncheck this answer? — Stéphane Laurent, Aug 20 '20 at 09:16
I don't remember unchecking, must have been a mistake. I had to change browser to confirm that it is now green check. — Rppa, Aug 20 '20 at 12:31

R Shiny group buttons with individual hover dropdown selection

1 Answers1

EDIT

Linked