CODEWITHSUNDEEP
rshinyshinyjs
Tom C
Tom C

Reputation: 156

Widgets appear with mouse over

I would like a widget to be invisible until the mouse cursor is over it.

Using shinyjs I can make a widget show / hide when the cursor enters an 'Area'. However I would like to place the widget in the Area so to speak. Is this possible?

As far as I have got:

library(shiny)
library(shinyjs)

shinyApp(

 ui = fluidPage(
    useShinyjs(), 
    p(id="Area","Area"),   
    selectInput("A_widget", label = "A widget", choices=c("None"), selected="None")   
 ),

 server = function(input, output) {
    shinyjs::hide("A_widget")
    onevent("mouseenter", "Area", shinyjs::show("A_widget"))
    onevent("mouseleave", "Area", shinyjs::hide("A_widget"))
 }

))

I would like something like this pseudocode with the widget in the mouse over 'Area':

library(shiny)
library(shinyjs)

shinyApp(

 ui = fluidPage(
    useShinyjs(), 
    p(id="Area", selectInput("A_widget", label = "A widget", choices=c("None"), selected="None"))
 ),

 server = function(input, output) {
    shinyjs::hide("A_widget")
    onevent("mouseenter", "Area", shinyjs::show("A_widget"))
    onevent("mouseleave", "Area", shinyjs::hide("A_widget"))
 }

))

I would like a widget that appears with mouse over. Thanks!

Upvotes: 1

Views: 406

Answers (1)

Stéphane Laurent
Stéphane Laurent

Reputation: 84539

Use a div with dimensions:

library(shiny)
library(shinyjs)

shinyApp(

  ui = fluidPage(
    useShinyjs(), 
    div(id="Area", style = "width:300px;height:50px", 
        selectInput("A_widget", label = "A widget", choices=c("None"), selected="None"))
  ),

  server = function(input, output) {
    shinyjs::hide("A_widget")
    onevent("mouseenter", "Area", shinyjs::show("A_widget"))
    onevent("mouseleave", "Area", shinyjs::hide("A_widget"))
  }

)

Upvotes: 2

Related Questions