tooltip: Create a Bootstrap 4 Tooltip from the UI side

In bs4Dash: A 'Bootstrap 4' Version of 'shinydashboard'

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.

Note

tooltip does not automatically handles tooltip removal and must be seperately implemented. If the dashboardHeader help parameter is TRUE, all tooltips may be enabled or disabled depending on the switch value, which may solve this problem. This allows to toggle tooltips whenever required.

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

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

bs4Dash documentation built on July 9, 2023, 7:49 p.m.