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