## Popover

Popover components for displaying contextual information on hover or click.

### Basic Popover

This is a basic popover content.

HTML

    <div
                class="popover-wrapper"
                style="display: inline-block; position: relative"
            >
                <button class="button popover-trigger">Hover me</button>
                <div class="popover popover--top">
                    <div class="popover__content">
                        <p>This is a basic popover content.</p>
                    </div>
                    <div class="popover__arrow"></div>
                </div>
            </div>

### Popover Positions

Popover on top
Popover on bottom
HTML

    <div
                style="
                    display: flex;
                    gap: 48px;
                    flex-wrap: wrap;
                    padding: 80px 20px;
                "
            >
                <div class="popover-wrapper" style="position: relative">
                    <button class="button">Top</button>
                    <div
                        class="popover popover--top show"
                        style="
                            position: absolute;
                            bottom: 100%;
                            left: 50%;
                            transform: translateX(-50%);
                            margin-bottom: 8px;
                        "
                    >
                        <div class="popover__content">Popover on top</div>
                    </div>
                </div>

                <div class="popover-wrapper" style="position: relative">
                    <button class="button">Bottom</button>
                    <div
                        class="popover popover--bottom show"
                        style="
                            position: absolute;
                            top: 100%;
                            left: 50%;
                            transform: translateX(-50%);
                            margin-top: 8px;
                        "
                    >
                        <div class="popover__content">Popover on bottom</div>
                    </div>
                </div>
            </div>

### Popover with Header

Popover Title

Detailed information goes here with a header for organization.

HTML

    <div
                class="popover-wrapper"
                style="display: inline-block; position: relative"
            >
                <button class="button">Click for details</button>
                <div
                    class="popover popover--bottom"
                    style="
                        position: absolute;
                        top: 100%;
                        left: 0;
                        margin-top: 8px;
                        min-width: 250px;
                    "
                >
                    <div
                        class="popover__header"
                        style="
                            padding: 12px;
                            border-bottom: 1px solid var(--color_line_secondary);
                            font-weight: 600;
                        "
                    >
                        Popover Title
                    </div>
                    <div class="popover__content" style="padding: 12px">
                        <p>
                            Detailed information goes here with a header for
                            organization.
                        </p>
                    </div>
                </div>
            </div>

### Interactive Popover

John Doe

john@example.com

View Profile Settings Sign Out
HTML

    <div
                class="popover-wrapper"
                style="display: inline-block; position: relative"
            >
                <button class="button button--primary">User Profile</button>
                <div
                    class="popover popover--bottom"
                    style="
                        position: absolute;
                        top: 100%;
                        left: 0;
                        margin-top: 8px;
                        min-width: 220px;
                        background: var(--color_fill_primary);
                        border: 1px solid var(--color_line_secondary);
                        border-radius: 8px;
                        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
                    "
                >
                    <div class="popover__content" style="padding: 16px">
                        <div
                            style="
                                display: flex;
                                align-items: center;
                                gap: 12px;
                                margin-bottom: 12px;
                            "
                        >
                            <div
                                style="
                                    width: 40px;
                                    height: 40px;
                                    border-radius: 50%;
                                    background: var(--color_fill_secondary);
                                "
                            ></div>
                            <div>
                                <strong>John Doe</strong>
                                <p
                                    style="
                                        margin: 0;
                                        font-size: 12px;
                                        opacity: 0.7;
                                    "
                                >
                                    john@example.com
                                </p>
                            </div>
                        </div>
                        <hr class="divider" />
                        <a href="#" style="display: block; padding: 8px 0">
                            View Profile
                        </a>
                        <a href="#" style="display: block; padding: 8px 0">
                            Settings
                        </a>
                        <a
                            href="#"
                            style="
                                display: block;
                                padding: 8px 0;
                                color: var(--color_state_error);
                            "
                        >
                            Sign Out
                        </a>
                    </div>
                </div>
            </div>

- Latest update: Stylescape v0.1 now live!
- New components released today.
- 💡 Tip: Use mixins for modular SCSS!