CODEWITHSUNDEEP
javascriptrshinyhover
Dee V
Dee V

Reputation: 147

Display Text only on hover

I'm working on a shiny app in which I only want to want textouput on hover or mouse over action

I tried adding an action button

UI:

fluidRow(box (title = p("Rates by Gender and Race", actionButton("titleBtId", "", icon=icon('question-circle'),class = "btn-xs", title = "Info"),textOutput("text_id"),hover=T), width = 15, status = 'primary', solidHeader = TRUE,tabPanel('',plotlyOutput("racegender",height = "100%"))%>% withSpinner(color="#0dc5c1")))

Server:

output$text_id <- renderText({
  paste0("hi")
})

I'm not sure how would I edit it to only display text on hover

Upvotes: 1

Views: 5651

Answers (2)

phalteman
phalteman

Reputation: 3532

An alternative to modal popups, depending on what user experience you want, is to use tooltips from the shinyBS package, which has functions for subtle but effective popups and tooltips. Here is an example of the different functionality of hovering or clicking, and putting the tooltips in the UI or in the server, with equivalent experience. Note that theoretically you could put a hover tooltip in the UI using tipify(), but for some reason this doesn't seem to be working with actionButtons though it continues to work for other input elements.

library(shiny)
library(shinyBS)

ui <- fluidPage(
   titlePanel("ShinyBS tooltips"),
   actionButton("btn", "On hover"),
   tipify(actionButton("btn2", "On click"), "Hello again! This is a click-able pop-up", placement="bottom", trigger = "click")
  )

server <- function(input, output, session) {
  addTooltip(session=session,id="btn",title="Hello! This is a hover pop-up. You'll have to click to see the next one.")
}

shinyApp(ui, server)

Upvotes: 6

Dee V
Dee V

Reputation: 147

Got it working using ModalDialog

UI

fluidRow(
box (title = p("Rates by Gender and Race",  tags$head(                                     tags$style(HTML('#titleBtId{background-color:black}'))), actionButton("titleBtId", "", icon=icon('question-circle'),class = "btn-xs", title = "Info"),hover=T), width = 15, status = 'primary', solidHeader = TRUE,                                     tabPanel('',plotlyOutput("racegender",height = "100%"))%>% withSpinner(color="#0dc5c1")))

Server:

  observeEvent(input$titleBtId, {
    showModal(modalDialog(
      title = "Note",
      "This chart if independent of Date-range and Age-range selections",
      easyClose = TRUE
    ))
  })

Upvotes: 0

Related Questions