ui.tooltip
ui.tooltip(trigger, *args, id=None, placement='auto', options=None, **kwargs)
Add a tooltip to a UI element.
Display additional information when focusing (or hovering over) a UI element.
Parameters
trigger: TagChild
-
A UI element (i.e., Tag) to serve as the tooltips trigger. It’s good practice for this element to be a keyboard-focusable and interactive element (e.g., input_action_button, input_action_link, etc.) so that the tooltip is accessible to keyboard and assistive technology users.
*args: TagChild | TagAttrs = ()
-
Contents to the tooltip’s body. Or tag attributes that are supplied to the resolved Tag object.
id: Optional[str] = None
-
A character string. Required to reactively respond to the visibility of the tooltip (via the
input[id]
value) and/or update the visibility/contents of the tooltip. placement: Literal[‘auto’, ‘top’, ‘right’, ‘bottom’, ‘left’] = ‘auto’
-
The placement of the tooltip relative to its trigger.
options: Optional[
dict
[str,object
]] = None-
A list of additional Bootstrap options.
Details
If trigger
yields multiple HTML elements (e.g., a TagList or complex shinywidgets
object), the last HTML element is used as the trigger. If the trigger
should contain all of those elements, wrap the object in a div
or span
.
Accessibility Of Tooltip Triggers
Because the user needs to interact with the trigger
element to see the tooltip
, it’s best practice to use an element that is typically accessible via keyboard interactions, like a button or a link.
If you use a non-interactive element, like a <span>
or text, tooltip()
will automatically add the tabindex="0"
attribute to the trigger element to make sure that users can reach the element with the keyboard. This means that in most cases you can use any element you want as the trigger.
One place where it’s important to consider the accessibility of the trigger is when using an icon without any accompanying text. In these cases, many icon elements are created with the assumption that the icon is decorative, which will make it inaccessible to users of assistive technologies.
When using an icon as the primary trigger, ensure that the icon does not have aria-hidden="true"
or role="presentation"
attributes. Icon packages typically provide a way to specify a title for the icon, as well as a way to specify that the icon is not decorative. The title should be a short description of the purpose of the trigger, rather than a description of the icon itself.
For example:
= "About tooltips"
icon_title def bs_info_icon(title: str):
# Enhanced from https://rstudio.github.io/bsicons/ via `bsicons::bs_icon("info-circle", title = icon_title)`
return ui.HTML(f'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="bi bi-info-circle " style="height:1em;width:1em;fill:currentColor;" aria-hidden="true" role="img" ><title>{title}</title><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"></path><path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"></path></svg>')
ui.tooltip(
bs_info_icon(icon_title),"Text shown in the tooltip."
)
= "About tooltips"
icon_title def fa_info_circle(title: str):
# Enhanced from https://rstudio.github.io/fontawesome/ via `fontawesome::fa("info-circle", a11y = "sem", title = icon_title)`
return ui.HTML(f'<svg aria-hidden="true" role="img" viewBox="0 0 512 512" style="height:1em;width:1em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><title>{title}</title><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"/></svg>')
ui.tooltip(
fa_info_circle(icon_title),"Text shown in the tooltip."
)
See Also
Examples
#| standalone: true
#| components: [editor, viewer]
#| layout: vertical
#| viewerHeight: 400
## file: app.py
from icons import question_circle_fill
from shiny import App, ui
app_ui = ui.page_fluid(
ui.tooltip(
ui.input_action_button("btn", "A button", class_="mt-3"),
"A message",
id="btn_tooltip",
),
ui.hr(),
ui.card(
ui.card_header(
ui.tooltip(
ui.span("Card title ", question_circle_fill),
"Additional info",
placement="right",
id="card_tooltip",
),
),
"Card body content...",
),
)
app = App(app_ui, server=None)
## file: icons.py
from shiny import ui
# https://icons.getbootstrap.com/icons/question-circle-fill/
question_circle_fill = ui.HTML(
'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-question-circle-fill mb-1" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286a.237.237 0 0 0 .241.247zm2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z"/></svg>'
)