Popover Component - JSON API V2 Examples

Example 1: Basic Click Popover

Simple click-triggered popovers with headers and content. Perfect for additional information and help text.

const config = {
    version: 2,
    layoutId: "click-popover",
    breakpoints: { xs: 1, sm: 2, md: 3 },
    items: [
        {
            id: "popover-1",
            content: {
                type: "popover",
                triggerText: "Info",
                header: "Information",
                content: "<p>This is a simple popover with a header and content.</p>",
                placement: "top",
                triggerMode: "click"
            }
        },
        {
            id: "popover-2",
            content: {
                type: "popover",
                triggerText: "Help",
                header: "Need Help?",
                content: "<p>Click outside or press Escape to close this popover.</p>",
                placement: "bottom",
                triggerMode: "click"
            }
        },
        {
            id: "popover-3",
            content: {
                type: "popover",
                triggerText: "Details",
                header: "More Details",
                content: "<p>Popovers can contain rich HTML content and links.</p>",
                placement: "right",
                triggerMode: "click"
            }
        }
    ]
};

RSL.JSONLayout.renderLayout('#demo1-output', config);

Example 2: Hover Popovers

Hover-triggered popovers that appear on mouseenter. Great for tooltips and quick previews.

const config = {
    version: 2,
    layoutId: "hover-popover",
    breakpoints: { xs: 1, sm: 2, md: 3 },
    items: [
        {
            id: "hover-1",
            content: {
                type: "popover",
                triggerText: "Hover Me",
                header: "Hover Popover",
                content: "<p>This appears when you hover over the trigger.</p>",
                placement: "top",
                triggerMode: "hover"
            }
        },
        {
            id: "hover-2",
            content: {
                type: "popover",
                triggerText: "Preview",
                header: "Quick Preview",
                content: "<p>Perfect for showing additional context.</p>",
                placement: "bottom",
                triggerMode: "hover"
            }
        },
        {
            id: "hover-3",
            content: {
                type: "popover",
                triggerText: "Tooltip Style",
                content: "<p>Popovers without headers work like tooltips.</p>",
                placement: "right",
                triggerMode: "hover"
            }
        }
    ]
};

RSL.JSONLayout.renderLayout('#demo2-output', config);

Example 3: Auto-Positioning Popovers

Popovers with automatic intelligent positioning that adjusts based on viewport boundaries.

const config = {
    version: 2,
    layoutId: "auto-popover",
    breakpoints: { xs: 1 },
    items: [
        {
            id: "auto-1",
            content: {
                type: "popover",
                triggerText: "Auto Position",
                header: "Smart Positioning",
                content: "<p>This popover automatically finds the best placement based on available space in the viewport.</p>",
                placement: "auto",
                triggerMode: "click",
                animation: "scale"
            }
        }
    ]
};

RSL.JSONLayout.renderLayout('#demo3-output', config);

Example 4: Popovers with Rich Content

Popovers can contain complex HTML content including lists, buttons, and formatted text.

const config = {
    version: 2,
    layoutId: "rich-popover",
    breakpoints: { xs: 1, sm: 2 },
    items: [
        {
            id: "rich-1",
            content: {
                type: "popover",
                triggerText: "Feature List",
                header: "Key Features",
                content: "<ul><li>Responsive design</li><li>Accessibility support</li><li>Keyboard navigation</li><li>Auto-positioning</li></ul>",
                placement: "top",
                triggerMode: "click"
            }
        },
        {
            id: "rich-2",
            content: {
                type: "popover",
                triggerText: "User Actions",
                header: "Quick Actions",
                content: "<p>Choose an action:</p><div style='margin-top: 0.5rem;'><button class='btn btn-sm btn-primary' style='margin-right: 0.5rem;'>Edit</button><button class='btn btn-sm btn-danger'>Delete</button></div>",
                placement: "bottom",
                triggerMode: "click"
            }
        }
    ]
};

RSL.JSONLayout.renderLayout('#demo4-output', config);