Display Text only on hover

Question

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

Do you want the text as a pop-up box? Or do you want the text appearing someplace in the UI on hover? — phalteman, Jun 06 '18 at 16:46

score 6 · Answer 1 · answered Jun 06 '18 at 18:57

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)

score 0 · Answer 2 · answered Jun 06 '18 at 18:08

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
    ))
  })

Modals are a good method. If you're looking for something more subtle, see my alternative answer. — phalteman, Jun 06 '18 at 18:59

Display Text only on hover

2 Answers2

Linked