bslib (version 0.5.1)

tooltip: Add a tooltip to a UI element

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/

See Also

popover()

Examples

if (FALSE) { # interactive()

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