Tooltip & Popover

Tooltips and Popovers provide small overlays of content on hover, click, or focus. They are essential for providing extra context without cluttering the UI.

Bootstrap Reference

Bootstrap 5 Tooltips & Bootstrap 5 Popovers

---

Quick Start (Tooltip)

Live Preview (Tooltip)

Hover Me

Tooltip(
    Button("Hover Me", variant="secondary"),
    title="I am a tooltip!"
)

---

Quick Start (Popover)

Popovers are similar to tooltips but can contain a title and more complex content (usually triggered by click).

Live Preview (Popover)

Click Me

Popover(
    Button("Click Me", variant="primary"),
    title="Rich Details",
    content="This is more detailed information inside a popover."
)

---

Visual Examples & Use Cases

1. Positioning

Use the placement argument to control where the overlay appears.

Code & Output

Live Preview (Positioning)

Top Right Bottom Left

Tooltip(Button("Top"), title="On top", placement="top")
Tooltip(Button("Right"), title="On right", placement="right")
Tooltip(Button("Bottom"), title="On bottom", placement="bottom")
Tooltip(Button("Left"), title="On left", placement="left")

2. Activation Triggers

Tooltips usually trigger on hover, but you can change this to focus or click.

# Only shows when the input field is focused (tabbed into)
Tooltip(Input("field", placeholder="Type..."), title="Help text", trigger="focus")

---

Practical Functionality

1. Automatic Initialization

In standard Bootstrap, you must manually run JavaScript to enable tooltips. FastStrap handles this for you automatically using a global initialization script that targets any element with data-bs-toggle="tooltip" or "popover".

---

Parameter Reference

Tooltip

Param	Type	Description
title	str	The text content of the tooltip.
placement	str	top, bottom, left, right, auto.
trigger	str	hover, focus, click, manual.
animation	bool	Default True. Enables CSS fade.

Popover

Param	Type	Description
title	str	The header of the popover.
content	str	The body text of the popover.
placement	str	Same as tooltip.
trigger	str	Default is click.
dismissible	bool	If True, closes when the user clicks anywhere else.

faststrap.components.feedback.overlays.Tooltip(text, *children, placement='top', trigger='hover focus', html=False, tag='span', **kwargs)

Bootstrap Tooltip component (wrapper).

Wraps content to add a tooltip on hover/focus. Requires the FastStrap init script (auto-included via add_bootstrap).

Parameters:

Name	Type	Description	Default
text	str	Tooltip text	required
*children	Any	Element(s) that trigger the tooltip	()
placement	PlacementType	Position (top, right, bottom, left)	'top'
trigger	TriggerType	Events that trigger the tooltip	'hover focus'
html	bool	Allow HTML in tooltip text	False
tag	str	HTML tag for the wrapper (default: "span")	'span'
**kwargs	Any	Additional HTML attributes	{}

Returns:

Type	Description
Any	FastHTML element (Span by default) with tooltip attributes

Example

Tooltip("I am a tooltip", Button("Hover me"))

Tooltip("Bold tip", Icon("info"), html=True)

Source code in src/faststrap/components/feedback/overlays.py

@register(category="feedback", requires_js=True)
def Tooltip(
    text: str,
    *children: Any,
    placement: PlacementType = "top",
    trigger: TriggerType = "hover focus",
    html: bool = False,
    tag: str = "span",
    **kwargs: Any,
) -> Any:
    """Bootstrap Tooltip component (wrapper).

    Wraps content to add a tooltip on hover/focus.
    Requires the FastStrap init script (auto-included via add_bootstrap).

    Args:
        text: Tooltip text
        *children: Element(s) that trigger the tooltip
        placement: Position (top, right, bottom, left)
        trigger: Events that trigger the tooltip
        html: Allow HTML in tooltip text
        tag: HTML tag for the wrapper (default: "span")
        **kwargs: Additional HTML attributes

    Returns:
        FastHTML element (Span by default) with tooltip attributes

    Example:
        >>> Tooltip("I am a tooltip", Button("Hover me"))

        >>> Tooltip("<b>Bold</b> tip", Icon("info"), html=True)
    """
    # Build attributes
    attrs: dict[str, Any] = {
        "data-bs-toggle": "tooltip",
        "data-bs-title": text,
        "data-bs-placement": placement,
        "data-bs-trigger": trigger,
    }

    if html:
        attrs["data-bs-html"] = "true"

    attrs.update(convert_attrs(kwargs))

    # We use Span by default as it's inline and non-intrusive
    # Ideally users pass a single child, but we support multiple
    return Span(*children, **attrs)

faststrap.components.feedback.overlays.Popover(title, content, *children, placement='right', trigger='click', html=False, tag='span', container='body', **kwargs)

Bootstrap Popover component (wrapper).

Wraps content to show a popover on click/hover. Requires the FastStrap init script.

Parameters:

Name	Type	Description	Default
title	str	Popover header	required
content	str	Popover body text	required
*children	Any	Element(s) that trigger the popover	()
placement	PlacementType	Position (top, right, bottom, left)	'right'
trigger	TriggerType	Events (click, hover, focus)	'click'
html	bool	Allow HTML in content	False
tag	str	HTML tag for wrapper	'span'
container	str | None	Container to append to ("body" avoids containment issues)	'body'
**kwargs	Any	Additional HTML attributes	{}

Returns:

Type	Description
Any	FastHTML element with popover attributes

Example

Popover("Title", "Content here", Button("Click me"))

Source code in src/faststrap/components/feedback/overlays.py

@register(category="feedback", requires_js=True)
def Popover(
    title: str,
    content: str,
    *children: Any,
    placement: PlacementType = "right",
    trigger: TriggerType = "click",
    html: bool = False,
    tag: str = "span",
    container: str | None = "body",
    **kwargs: Any,
) -> Any:
    """Bootstrap Popover component (wrapper).

    Wraps content to show a popover on click/hover.
    Requires the FastStrap init script.

    Args:
        title: Popover header
        content: Popover body text
        *children: Element(s) that trigger the popover
        placement: Position (top, right, bottom, left)
        trigger: Events (click, hover, focus)
        html: Allow HTML in content
        tag: HTML tag for wrapper
        container: Container to append to ("body" avoids containment issues)
        **kwargs: Additional HTML attributes

    Returns:
        FastHTML element with popover attributes

    Example:
        >>> Popover("Title", "Content here", Button("Click me"))
    """
    attrs: dict[str, Any] = {
        "data-bs-toggle": "popover",
        "data-bs-title": title,
        "data-bs-content": content,
        "data-bs-placement": placement,
        "data-bs-trigger": trigger,
    }

    if container:
        attrs["data-bs-container"] = container

    if html:
        attrs["data-bs-html"] = "true"

    attrs.update(convert_attrs(kwargs))

    # Using Span ("d-inline-block" might be needed for some triggers if wrapper)
    # But let's trust user or default behavior
    return Span(*children, **attrs)