R: Add a tooltip to a UI element

tooltip {bslib}

R Documentation

Description

Display additional information when focusing (or hovering over) a UI element.

Usage

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

toggle_tooltip(id, show = NULL, session = get_current_session())

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

Arguments

`trigger`	A UI element (i.e., htmltools tag) to serve as the tooltip trigger. 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 tooltip. Character strings are automatically escaped unless marked as `HTML()`.
`id`	a character string that matches an existing tooltip id.
`placement`	The placement of the tooltip relative to its trigger.
`options`	A list of additional options.
`show`	Whether to show (`TRUE`) or hide (`FALSE`) the tooltip. The default (`NULL`) will show if currently hidden and hide if currently shown. Note that a tooltip 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

tooltip(): Add a tooltip to a UI element
toggle_tooltip(): Programmatically show/hide a tooltip.
update_tooltip(): Update the contents of a tooltip.

Theming/Styling

Like other bslib components, tooltips 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:

tooltip(
  "Trigger", "Tooltip message",
  options = list(customClass = "my-tip")
)

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

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

References

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

Examples



tooltip(
  shiny::actionButton("btn", "A button"),
  "A message"
)

card(
  card_header(
    tooltip(
      span("Card title ", bsicons::bs_icon("question-circle-fill")),
      "Additional info",
      placement = "right"
    )
  ),
  "Card body content..."
)

[Package bslib version 0.5.1 Index]

Add a tooltip to a UI element