shinyBS (version 0.61)

Tooltips_and_Popovers: Tooltips and Popovers

Description

Tooltips and Popovers allow you to add additional information about controls or outputs without cluttering up your user interface. You can add a tooltip to a button that displays on hover and better explains what the button will do, or you could add a popover to an output providing further analysis of that output.

Components

There are eight functions in the Tooltips and Popovers family:

bsTooltip

Used in the UI to add a tooltip to an element in your UI.

bsPopover

Used in the UI to add a popover to an element in your UI.

tipify

Wrap any UI element in tipify to add a tooltip to the wrapped element. Preferred for elemented created with renderUI.

popify

Wrap any UI element in popify to add a popover to the wrapped element. Preferred for elements created with renderUI.

addTooltip

Used in the Server logic to add a tooltip to an element in your UI.

addPopover

Used in the Server logic to add a popover to an element in your UI.

removeTooltip

Used in the Server logic to remove a tooltip from an element in your UI.

removePopover

Used in the Server logic to remove a popover from an element in your UI.

Changes

An options argument has been added to the creation functions to allow advanced users more control over how the tooltips and popovers appear. See the Twitter Bootstrap 3 documentation for more details.

Details

You can create tooltips and popovers from either the UI script or within the Server logic. bsTooltip and bsPopover are used in the UI, and addTooltip and addPopover are used in the Server logic. tipify and popify can be used within the UI or from within a renderUI in the Server logic. They also have the added advantage of not requiring that the UI element have an ID attribute.

See Also

Twitter Bootstrap 3

Other Tooltips_and_Popovers: addPopover; addTooltip; bsPopover; bsTooltip; popify; removePopover; removeTooltip; tipify

Examples

# NOT RUN {
library(shiny)
library(shinyBS)

app = shinyApp(
 ui =
 fluidPage(
   sidebarLayout(
     sidebarPanel(
       sliderInput("bins",
                   "Number of bins:",
                   min = 1,
                   max = 50,
                   value = 30),
       bsTooltip("bins", "The wait times will be broken into this many equally spaced bins",
         "right", options = list(container = "body"))
     ),
     mainPanel(
       plotOutput("distPlot"),
       uiOutput("uiExample")
     )
   )
 ),
 server =
 function(input, output, session) {
   output$distPlot <- renderPlot({

     # generate bins based on input$bins from ui.R
     x    <- faithful[, 2]
     bins <- seq(min(x), max(x), length.out = input$bins + 1)

     # draw the histogram with the specified number of bins
     hist(x, breaks = bins, col = 'darkgray', border = 'white')

   })
   output$uiExample <- renderUI({
     tags$span(
       popify(bsButton("pointlessButton", "Button", style = "primary", size = "large"),
         "A Pointless Button",
         "This button is <b>pointless</b>. It does not do <em>anything</em>!"),
       tipify(bsButton("pB2", "Button", style = "inverse", size = "extra-small"),
         "This button is pointless too!")
     )
   })
   addPopover(session, "distPlot", "Data", content = paste0("<p>Waiting time between ",
     "eruptions and the duration of the eruption for the Old Faithful geyser ",
     "in Yellowstone National Park, Wyoming, USA.</p><p>Azzalini, A. and ",
     "Bowman, A. W. (1990). A look at some data on the Old Faithful geyser. ",
     "Applied Statistics 39, 357-365.</p>"), trigger = 'click')
 }
)
# }
# NOT RUN {
 runApp(app)
# }