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:

icon_title = "About tooltips"
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."
)

icon_title = "About tooltips"
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."
)

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>'
)

ui.tooltip

Parameters

Details

Accessibility of Tooltip Triggers

See Also

Examples