bslib (version 0.5.1)

popover: Add a popover to a UI element

Description

Display additional information when clicking on a UI element (typically a button).

Usage

popover(
  trigger,
  ...,
  title = NULL,
  id = NULL,
  placement = c("auto", "top", "right", "bottom", "left"),
  options = list()
)
toggle_popover(id, show = NULL, session = get_current_session())
update_popover(id, ..., title = NULL, session = get_current_session())

Arguments

trigger

The UI element to serve as the popover trigger (typically a shiny::actionButton() or similar). If trigger renders as multiple HTML elements (e.g., it's a tagList()), the last HTML element is used for the trigger. If the trigger should contain all of those elements, wrap the object in a div() or span().

...

UI elements for the popover's body. Character strings are automatically escaped unless marked as HTML().

title

A title (header) for the popover.

id

A character string. Required to re-actively respond to the visibility of the popover (via the input[[id]] value) and/or update the visibility/contents of the popover.

placement

The placement of the popover relative to its trigger.

options

A list of additional options.

show

Whether to show (TRUE) or hide (FALSE) the popover. The default (NULL) will show if currently hidden and hide if currently shown. Note that a popover will not be shown if the trigger is not visible (e.g., it's hidden behind a tab).

session

A Shiny session object (the default should almost always be used).

Functions

• popover(): Add a popover to a UI element

• toggle_popover(): Programmatically show/hide a popover.

• update_popover(): Update the contents of a popover.

Closing popovers

In addition to clicking the close_button, popovers can be closed by pressing the Esc/Space key when the popover (and/or its trigger) is focused.

Theming/Styling

Like other bslib components, popovers can be themed by supplying relevant theming variables to bs_theme(), which effects styling of every popover on the page. To style a specific popover differently from other popovers, utilize the customClass option:

popover(
  "Trigger", "Popover message",
  options = list(customClass = "my-pop")
)

And then add relevant rules to bs_theme() via bs_add_rules():

bs_theme() |> bs_add_rules(".my-pop { max-width: none; }")

References

https://getbootstrap.com/docs/5.3/components/popovers/

See Also

tooltip()

Examples

if (FALSE) { # interactive()

popover(
  shiny::actionButton("btn", "A button"),
  "Popover body content...",
  title = "Popover title"
)

library(shiny)

ui <- page_fixed(
  card(class = "mt-5",
    card_header(
      popover(
        uiOutput("card_title", inline = TRUE),
        title = "Provide a new title",
        textInput("card_title", NULL, "An editable title")
      )
    ),
    "The card body..."
  )
)

server <- function(input, output) {
  output$card_title <- renderUI({
    list(input$card_title, bsicons::bs_icon("pencil-square"))
  })
}

shinyApp(ui, server)
}