javascript - Display Text only on hover - Stack Overflow

admin管理员组

文章数量:1389812

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

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

• javascript
• r
• shiny
• hover

Share Improve this question Follow asked Jun 6, 2018 at 15:09 Dee VDee V 14711 silver badge1212 bronze badges 2

• Do you want the text as a pop-up box? Or do you want the text appearing someplace in the UI on hover? – phalteman Commented Jun 6, 2018 at 16:46
• @phalteman I want it as a pop-up box Thanks – Dee V Commented Jun 6, 2018 at 17:24

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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)

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

本文标签： javascriptDisplay Text only on hoverStack Overflow