Mosaic Logo

Mosaic Tiles Demo

Popover

Displays rich content in a portal, triggered by a button.

Examples

Basic Popover

A simple popover with basic content

This is a basic popover content.

View Code
use leptos::prelude::*;
use mosaic_tiles::button::*;
use mosaic_tiles::popover::*;

#[component]
pub fn BasicExample() -> impl IntoView {
    view! {
        <Popover>
            <PopoverTrigger>
                <Button>"Open Popover"</Button>
            </PopoverTrigger>
            <PopoverContent>
                <div class="p-4">
                    <p>"This is a basic popover content."</p>
                </div>
            </PopoverContent>
        </Popover>
    }
}

Rich Content

Popover with title, description, and action buttons

Popover Title

This popover contains rich content including a title, description, and actions.

Interactive Counter Test

View Code
use leptos::prelude::*;
use mosaic_tiles::button::*;
use mosaic_tiles::popover::*;

use crate::components::counter::Counter;

#[component]
pub fn RichContentExample() -> impl IntoView {
    view! {
        <Popover>
            <PopoverTrigger>
                <Button>"Show Info"</Button>
            </PopoverTrigger>
            <PopoverContent>
                <div class="p-4 space-y-3">
                    <h3 class="text-lg font-semibold">"Popover Title"</h3>
                    <p class="text-sm">
                        "This popover contains rich content including a title, description, and actions."
                    </p>

                    <div class="border-t border-gray-200 pt-3">
                        <p class="text-sm font-medium mb-2">"Interactive Counter Test"</p>
                        <Counter />
                    </div>
                </div>
            </PopoverContent>
        </Popover>
    }
}

Multiple Popovers

Multiple independent popovers on the same page

Content for first popover.

Content for second popover.

Content for third popover.

View Code
use leptos::prelude::*;
use mosaic_tiles::button::*;
use mosaic_tiles::popover::*;

#[component]
pub fn MultipleExample() -> impl IntoView {
    view! {
        <div class="flex gap-4">
            <Popover>
                <PopoverTrigger>
                    <Button>"Popover 1"</Button>
                </PopoverTrigger>
                <PopoverContent>
                    <div class="p-4">
                        <p>"Content for first popover."</p>
                    </div>
                </PopoverContent>
            </Popover>
            <Popover>
                <PopoverTrigger>
                    <Button variant=ButtonVariant::Secondary>"Popover 2"</Button>
                </PopoverTrigger>
                <PopoverContent>
                    <div class="p-4">
                        <p>"Content for second popover."</p>
                    </div>
                </PopoverContent>
            </Popover>
            <Popover>
                <PopoverTrigger>
                    <Button variant=ButtonVariant::Outline>"Popover 3"</Button>
                </PopoverTrigger>
                <PopoverContent>
                    <div class="p-4">
                        <p>"Content for third popover."</p>
                    </div>
                </PopoverContent>
            </Popover>
        </div>
    }
}

Anatomy

use leptos::prelude::*;
use mosaic_tiles::button::*;
use mosaic_tiles::popover::*;

#[component]
pub fn PopoverAnatomy() -> impl IntoView {
    view! {
        <Popover>
            <PopoverTrigger>
                <Button />
            </PopoverTrigger>
            <PopoverContent />
        </Popover>
    }
}

API Reference

Popover

Main container component that manages popover state.

The Popover component provides context for PopoverTrigger and PopoverContent to communicate and manage the open/close state.

AttributeTypeDefaultDescription
childrenOption<Children>NonePopoverTrigger and PopoverContent components

PopoverTrigger

Wraps the trigger element that opens the popover.

The trigger element will toggle the popover visibility when clicked.

AttributeTypeDefaultDescription
childrenOption<Children>NoneThe trigger element (typically a Button)

PopoverContent

Displays the content when the popover is open.

The content is rendered conditionally based on the popover state and is positioned absolutely relative to the trigger.

AttributeTypeDefaultDescription
childrenOption<Children>NoneThe content to display in the popover