express.ui.popover

express.ui.popover(title=None, id=None, placement='auto', options=None, **kwargs)

Context manager for a popover

This function wraps popover.

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

Parameters

title: Optional[TagChild] = None: A title to display in the popover. Can be a character string or UI elements (i.e., tags).
id: Optional[str] = None: A character string. Required to reactively respond to the visibility of the popover (via the input[id] value) and/or update the visibility/contents of the popover.
placement: Literal[‘auto’, ‘top’, ‘right’, ‘bottom’, ‘left’] = ‘auto’: The placement of the popover relative to its trigger.
options: Optional[dict[str, object]] = None: A list of additional Bootstrap options.

Examples

#| standalone: true
#| components: [editor, viewer]
#| layout: vertical
#| viewerHeight: 400

## file: app.py
from icons import gear_fill

from shiny.express import input, render, ui

with ui.popover(id="btn_popover"):
    ui.input_action_button("btn", "A button", class_="mt-3")

    "A popover with more context and information than should be used in a tooltip."
    "You can even have multiple DOM elements in a popover!"


with ui.card(class_="mt-3"):
    with ui.card_header():
        "Plot title (Click the gear to change variables)"
        with ui.popover(placement="right", id="card_popover"):
            ui.span(gear_fill, style="position:absolute; top: 5px; right: 7px;")
            "Put dropdowns here to alter your plot!"
            ui.input_selectize("x", "X", ["x1", "x2", "x3"])
            ui.input_selectize("y", "Y", ["y1", "y2", "y3"])

    @render.text
    def plot_txt():
        return f"<Making plot using x: {input.x()} and y: {input.y()}>"


## file: icons.py
from shiny import ui

# https://icons.getbootstrap.com/icons/gear-fill/
gear_fill = ui.HTML(
    '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-gear-fill" viewBox="0 0 16 16"><path d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z"/></svg>'
)