Tooltips

#| standalone: true
#| components: [viewer]
#| viewerHeight: 200

library(shiny)
library(bslib)

ui <- page_fluid(
  tooltip( 
    actionButton("show", "A button with a tooltip"),
    "A message", 
    id = "tip", 
    placement = "right" 
  ), 
  verbatimTextOutput("state")
)

server <- function(input, output, session) {
  output$state <- renderText({
    paste("Tooltip state:", input$tip)
  })
}

shinyApp(ui, server)

library(shiny)
library(bslib)

ui <- page_fluid(
  tooltip( 
    actionButton("show", "A button with a tooltip"),
    "A message", 
    id = "tip", 
    placement = "right" 
  ), 
  verbatimTextOutput("state")
)

server <- function(input, output, session) {
  output$state <- renderText({
    paste("Tooltip state:", input$tip)
  })
}

shinyApp(ui, server)
No matching items

Relevant Functions

  • tooltip
    tooltip(trigger, ..., id = NULL, placement = c("auto", "top", "right", "bottom", "left"), options = list())

  • update_tooltip
    update_tooltip(id, ..., session = get_current_session())

No matching items

Details

A tooltip is a box that appears next to an element when a user hovers over the element. To add a tooltip to a UI component, wrap the component in bslib::tooltip(). Then pass tooltip() one or more elements to display, such as a simple string that contains a message.

Optionally assign the tooltip an id to trigger reactions when the tooltip becomes visible or to programmatically update the contents of the tooltip as your user navigates the app. A boolean that describes whether or not the tooltip is visible will be accessible as a reactive variable within the server function as input$<id>.

Control the placement of the tooltip relative to the item it highlights with the placement argument. placement defaults to 'auto', but can be set to one of 'top', 'bottom', 'left', or 'right'.

Accessibility of Tooltip Triggers

Because the user needs to interact with the trigger element to see the tooltip, it’s best practice to use an element that is typically accessible via keyboard interactions, like a button or a link.

If you use a non-interactive element, like a <span> or text, tooltip() will automatically add the tabindex="0" attribute to the trigger element to make sure that users can reach the element with the keyboard. This means that in most cases you can use any element you want as the trigger.

One place where it’s important to consider the accessibility of the trigger is when using an icon without any accompanying text. In these cases, many icon elements are created with the assumption that the icon is decorative, which will make it inaccessible to users of assistive technologies.

When using an icon as the primary trigger, ensure that the icon does not have aria-hidden="true" or role="presentation" attributes. Icon packages typically provide a way to specify a title for the icon, as well as a way to specify that the icon is not decorative. The title should be a short description of the purpose of the trigger, rather than a description of the icon itself.

For example:

tooltip(
  bsicons::bs_icon("info-circle", title = "About tooltips"),
  "Text shown in the tooltip."
)
tooltip(
  fontawesome::fa("info-circle", a11y = "sem", title = "About tooltips"),
  "Text shown in the tooltip."
)

Compare tooltips to popovers, which are a similar device for organizing the layout of a Shiny app.

See also

Update a tooltip message

Call bslib::update_tooltip() to update the message of a tooltip with a given id.

#| standalone: true
#| components: [viewer]
#| viewerHeight: 300

library(shiny)
library(bslib)

ui <- page_fluid(
  tooltip( 
    actionButton("show", "A button with a tooltip"),
    "A message", 
    id = "tip", 
    placement = "right" 
  ), 
  textInput("message", "Tooltip message", "Change me!")
)

server <- function(input, output, session) {
  bindEvent(
    observe({
      update_tooltip("tip", input$message) 
    }),
    input$message
  )
}

shinyApp(ui, server)
library(shiny)
library(bslib)

ui <- page_fluid(
  tooltip( 
    actionButton("show", "A button with a tooltip"),
    "A message", 
    id = "tip", 
    placement = "right" 
  ), 
  textInput("message", "Tooltip message", "Change me!")
)

server <- function(input, output, session) {
  bindEvent(
    observe({
      update_tooltip("tip", input$message) 
    }),
    input$message
  )
}

shinyApp(ui, server)
No matching items