bs4Dash (version 2.3.4)

tooltip: Create a Bootstrap 4 Tooltip from the UI side

Description

This replaces the shinyBS tooltip feature that is not compatible with Bootstrap 4

addTooltip adds a tooltip to the given target.

removeTooltip destroys the current targeted tooltip.

Usage

tooltip(tag, title, placement = c("top", "bottom", "left", "right"))
addTooltip(
  id = NULL,
  selector = NULL,
  options,
  session = shiny::getDefaultReactiveDomain()
)
removeTooltip(id, session = shiny::getDefaultReactiveDomain())

Arguments

tag

Tooltip target.

title

Tooltip title.

placement

Tooltip placement: "top", "bottom", "left" or "right".

id

Tooltip target id.

selector

jQuery selector. Allow more customization for the target (nested tags).

options

List of options to pass to the tooltip. See https://getbootstrap.com/docs/4.0/components/tooltips/.

session

Shiny session object.

Examples

if (interactive()) {
  library(shiny)
  library(bs4Dash)

  shinyApp(
    ui = dashboardPage(
      header = dashboardHeader(),
      sidebar = dashboardSidebar(),
      controlbar = dashboardControlbar(),
      footer = dashboardFooter(),
      title = "Tooltip UI",
      body = dashboardBody(
        tooltip(
          actionButton("goButton", "Hover to see the tooltip"),
          title = "My tooltip",
          placement = "top"
        )
      )
    ),
    server = function(input, output) {}
  )
}
if (interactive()) {
  library(shiny)
  library(bs4Dash)

  shinyApp(
    ui = dashboardPage(
      header = dashboardHeader(),
      sidebar = dashboardSidebar(),
      controlbar = dashboardControlbar(),
      footer = dashboardFooter(),
      title = "Tooltip server",
      body = dashboardBody(
        sliderInput("obs", "Number of observations:",
          min = 0, max = 1000, value = 500
        ),
        plotOutput("distPlot")
      )
    ),
    server = function(input, output, session) {
      output$distPlot <- renderPlot({
        hist(rnorm(input$obs))
      })

      observeEvent(input$obs, {
        if (input$obs > 500) {
          addTooltip(
            id = "distPlot",
            options = list(
              title = "Server tooltip",
              placement = "bottom"
            )
          )
        } else {
          removeTooltip(id = "distPlot")
        }
      })
    }
  )
}