Layr
⌘K
Ctrl K
Design Systems
Pro
AI Designer
Account
Roadmap
Sign in
Getting started
Salesforce Lightning
Lightning UI
Pro
Components
Accordion
Activity Timeline
Alert
App Launcher
Avatar
Avatar Group
Badges
Brand Band
Breadcrumbs
Builder Header
Button Groups
Button Icons
Buttons
Cards
Carousel
Chat
Checkbox
Checkbox Button
Checkbox Button Group
Checkbox Toggle
Color Picker
Combobox
Counter
Data Tables
Datepickers
Datetime Picker
Docked Composer
Docked Form Footer
Docked Utility Bar
Drop Zone
Dueling Picklist
Dynamic Icons
Dynamic Menu
Einstein Header
Expandable Section
Expression
Feeds
File Selector
Files
Form Element
Form Layout
Global Header
Global Navigation
Icons
Illustration
Input
List Builder
Lookups
Lookups Mobile
Map
Menus
Modals
Notifications
Page Headers
Panels
Path
Path Simple
Picklist
Pills
Popovers
Process
Progress Bar
Progress Indicator
Progress Ring
Prompt
Publishers
Radio Button Group
Radio Group
Regions
Rich Text Editor
Scoped Notifications
Scoped Tabs
Select
Setup Assistant
Slider
Spinners
Split View
Summary Detail
Tabs
Textarea
Tiles
Timepicker
Toast
Tooltips
Tree Grid
Trees
Trial Bar
Vertical Navigation
Vertical Tabs
Visual Picker
Welcome Mat
```html
Show Popover </button> <div class="slds-popover slds-nubbin_bottom slds-hide" role="dialog" aria-labelledby="featured-popover-heading" aria-describedby="featured-popover-body" id="featured-popover" style="position: absolute; top: -120px; left: 0;"> <div class="slds-popover__body" id="featured-popover-body"> <p>This is a sample popover with bottom nubbin positioning.</p> </div> </div> </div> </div> <!-- About Popovers --> <h2>About Popovers</h2> <p>A popover is used to display contextual information to the user.</p> <p>A popover can accept the following nubbin position classes: <code>.slds-nubbin_left</code>, <code>.slds-nubbin_left-top</code>, <code>.slds-nubbin_left-bottom</code>, <code>.slds-nubbin_top-left</code>, <code>.slds-nubbin_top-right</code>, <code>.slds-nubbin_right-top</code>, <code>.slds-nubbin_right-bottom</code>, <code>.slds-nubbin_bottom-left</code>, <code>.slds-nubbin_bottom-right</code>.</p> <!-- Accessibility --> <h2>Accessibility</h2> <div class="accessibility-info"> <h3>Notable features</h3> <ul> <li>Popovers <strong>must</strong> come with a triggering button</li> <li>They <strong>must</strong> have at least one focusable element inside</li> <li>They <strong>should</strong> be implemented as a keyboard focus trap</li> <li>When triggered, user focus should be placed on the first focusable element that isn <!-- Featured Example --> <div class="demo-section"> <h3>Featured Example</h3> <div class="popover-container"> <button class="slds-button slds-button_brand" onclick="togglePopover('featured-popover')"> Show Popover </button> <div id="featured-popover" class="slds-popover slds-nubbin_bottom" role="dialog" aria-labelledby="featured-popover-heading" aria-describedby="featured-popover-body"> <div class="slds-popover__header"> <h2 id="featured-popover-heading" class="slds-popover__header-title">Featured Popover</h2> <button class="slds-button slds-button_icon slds-button_icon-small slds-popover__close" onclick="closePopover('featured-popover')" title="Close"> <svg class="slds-button__icon" aria-hidden="true"> <use href="#utility-close"></use> </svg> <span class="slds-assistive-text">Close</span> </button> </div> <div class="slds-popover__body" id="featured-popover-body"> <p>This is a featured popover with a header and close button. It demonstrates the basic structure and functionality.</p> </div> </div> </div> </div> <!-- About Popovers --> <h2>About Popovers</h2> <p>A popover is used to display contextual information to the user.</p> <p>A popover can accept the following nubbin position classes: <code>.slds-nubbin_left</code>, <code>.slds-nubbin_left-top</code>, <code>.slds-nubbin_left-bottom</code>, <code>.slds-nubbin_top-left</code>, <code>.slds-nubbin_top-right</code>, <code>.slds-nubbin_right-top</code>, <code>.slds-nubbin_right-bottom</code>, <code>.slds-nubbin_bottom-left</code>, <code>.slds-nubbin_bottom-right</code>.</p> <!-- Accessibility --> <h3>Accessibility</h3> <div class="accessibility-info"> <h4>Notable features</h4> <ul> <li>Popovers <strong>must</strong> come with a triggering button</li> <li>They <strong>must</strong> have at least one focusable element inside</li> <li>They <strong>should</strong> be implemented as a keyboard focus trap</li> <li>When triggered, user focus should be placed on the first focusable element that isn't the close button</li> <li>Pressing the Escape key as well as clicking the close button should close the Popover</li> <li>User focus should be placed back on the triggering button when the popover is closed</li> </ul> <h4>Notable attributes</h4> <ul> <li>The Popover element should have <code>role="dialog"</code> applied</li> <li>The <code>dialog</code> should be labelled using <code>aria-labelledby</code> or <code>aria-label</code></li> <li>The <code>dialog</code> should be described using <code>aria-describedby</code></li> <li>The triggering element <strong>must</strong> have <code>aria-haspopup="true"</code> when opened</li> </ul> </div> <!-- Base --> <h2>Base</h2> <div class="demo-section"> <h3>Basic Popover</h3> <div class="popover-container"> <button class="slds-button slds-button_neutral" onclick="togglePopover('base-popover')"> Basic Popover </button> <div id="base-popover" class="slds-popover slds-nubbin_bottom" role="dialog" aria-labelledby="base-popover-body"> <div class="slds-popover__body" id="base-popover-body"> <p>This is a basic popover without a header or footer.</p> </div> </div> </div> </div> <!-- With Header --> <div class="demo-section"> <h3>With Header</h3> <div class="popover-container"> <button class="slds-button slds-button_neutral" onclick="togglePopover('header-popover')"> Popover with Header </button> <div id="header-popover" class="slds-popover slds-nubbin_bottom" role="dialog" aria-labelledby="header-popover-heading" aria-describedby="header-popover-body"> <div class="slds-popover__header"> <h2 id="header-popover-heading" class="slds-popover__header-title">Popover Header</h2> <button class="slds-button slds-button_icon slds-button_icon-small slds-popover__close" onclick="closePopover('header-popover')" title="Close"> <svg class="slds-button__icon" aria-hidden="true"> <use href="#utility-close"></use> </svg> <span class="slds-assistive-text">Close</span> </button> </div> <div class="slds-popover__body" id="header-popover-body"> <p>This popover includes a header with a title and close button.</p> </div> </div> </div> </div> <!-- With Footer --> <div class="demo-section"> <h3>With Footer</h3> <div class="popover-container"> <button class="slds-button slds-button_neutral" onclick="togglePopover('footer-popover')"> Popover with Footer </button> <div id="footer-popover" class="slds-popover slds-nubbin_bottom" role="dialog" aria-labelledby="footer-popover-body"> <div class="slds-popover__body" id="footer-popover-body"> <p>This popover includes a footer with action buttons.</p> </div> <div class="slds-popover__footer"> <button class="slds-button slds-button_neutral" onclick="closePopover('footer-popover')">Cancel</button> <button class="slds-button slds-button_brand">Save</button> </div> </div> </div> </div> <!-- With Badge --> <div class="demo-section"> <h3>With Badge</h3> <div class="popover-container"> <button class="slds-button slds-button_neutral" onclick="togglePopover('badge-popover')"> Popover with Badge </button> <div id="badge-popover" class="slds-popover slds-nubbin_bottom" role="dialog" aria-labelledby="badge-popover-heading" aria-describedby="badge-popover-body"> <div class="slds-popover__header"> <h2 id="badge-popover-heading" class="slds-popover__header-title"> New Feature <span class="slds-badge slds-badge_brand slds-m-left_x-small">Beta</span> </h2> <button class="slds-button slds-button_icon slds-button_icon-small slds-popover__close" onclick="closePopover('badge-popover')" title="Close"> <svg class="slds-button__icon" aria-hidden="true"> <use href="#utility-close"></use> </svg> <span class="slds-assistive-text">Close</span> </button> </div> <div class="slds-popover__body" id="badge-popover-body"> <p>This popover includes a badge in the header to indicate status or category.</p> </div> </div> </div> </div> <!-- Widths --> <h2>Widths</h2> <div class="demo-grid"> <div class="demo-column"> <h3>Small</h3> <div class="popover-container"> <button class="slds-button slds-button_neutral" onclick="togglePopover('small-popover')"> Small Width </button> <div id="small-popover" class="slds-popover slds-popover_small slds-nubbin_bottom" role="dialog" aria-labelledby="small-popover-body"> <div class="slds-popover__body" id="small-popover-body"> <p>Small width popover (20rem/320px).</p> </div> </div> </div> </div> <div class="demo-column"> <h3>Medium</h3> <div class="popover-container"> <button class="slds-button slds-button_neutral" onclick="togglePopover('medium-popover')"> Medium Width </button> <div id="medium-popover" class="slds-popover slds-popover_medium slds-nubbin_bottom" role="dialog" aria-labelledby="medium-popover-body"> <div class="slds-popover__body" id="medium-popover-body"> <p>Medium width popover (25rem/400px).</p> </div> </div> </div> </div> <div class="demo-column"> <h3>Large</h3> <div class="popover-container"> <button class="slds-button slds-button_neutral" onclick="togglePopover('large-popover')"> Large Width </button> <div id="large-popover" class="slds-popover slds-popover_large </div> </div> </div> </div> </div> </div> <div class="hidden rotate-45 text-red-500 bg-red-100 dark:text-red-400 dark:bg-red-900/50 text-green-500 bg-green-100 dark:text-green-400 dark:bg-green-900/50 scheme-light scheme-dark scheme-light-dark"> </div> </main> </body> </html> t the close button</li> <li>Pressing the Escape key as well as clicking the close button should close the Popover</li> <li>User focus should be placed back on the triggering button when the popover is closed</li> </ul> <h3>Notable attributes</h3> <ul> <li>The Popover element should have <code>role="dialog"</code> applied</li> <li>The <code>dialog</code> should be labelled using <code>aria-labelledby</code> or <code>aria-label</code></li> <li>The <code>dialog</code> should be described using <code>aria-describedby</code></li> <li>The triggering element <strong>must</strong> have <code>aria-haspopup="true"</code> when opened</li> </ul> </div> <!-- Base Examples --> <h2>Base</h2> <div class="demo-section"> <h3>Basic Popover</h3> <div class="popover-demo-container"> <button class="slds-button slds-button_neutral" aria-haspopup="false" onclick="togglePopover(this, 'basic-popover')"> Basic Popover </button> <div class="slds-popover slds-nubbin_bottom slds-hide" role="dialog" aria-labelledby="basic-popover-heading" aria-describedby="basic-popover-body" id="basic-popover" style="position: absolute; top: -100px; left: 0;"> <div class="slds-popover__body" id="basic-popover-body"> <p>This is a basic popover example.</p> </div> </div> </div> </div> <div class="demo-section"> <h3>With Header</h3> <div class="popover-demo-container"> <button class="slds-button slds-button_neutral" aria-haspopup="false" onclick="togglePopover(this, 'header-popover')"> With Header </button> <div class="slds-popover slds-nubbin_bottom slds-hide" role="dialog" aria-labelledby="header-popover-heading" aria-describedby="header-popover-body" id="header-popover" style="position: absolute; top: -140px; left: 0;"> <div class="slds-popover__header"> <h2 class="slds-text-heading_small" id="header-popover-heading">Popover Header</h2> <button class="slds-button slds-button_icon slds-button_icon-small slds-float_right" title="Close dialog" onclick="closePopover( <!-- Featured Example --> <div class="demo-section"> <h3>Featured Example</h3> <div class="popover-container"> <button class="slds-button slds-button_brand" onclick="togglePopover('featured-popover')"> Show Popover </button> <div id="featured-popover" class="slds-popover slds-nubbin_bottom" role="dialog" aria-labelledby="featured-popover-heading" aria-describedby="featured-popover-body"> <div class="slds-popover__header"> <h2 id="featured-popover-heading" class="slds-popover__header-title">Featured Popover</h2> <button class="slds-button slds-button_icon slds-button_icon-small slds-popover__close" onclick="closePopover('featured-popover')" title="Close"> <svg class="slds-button__icon" aria-hidden="true"> <use href="#utility-close"></use> </svg> <span class="slds-assistive-text">Close</span> </button> </div> <div class="slds-popover__body" id="featured-popover-body"> <p>This is a featured popover with a header and close button. It demonstrates the basic structure and functionality.</p> </div> </div> </div> </div> <!-- About Popovers --> <h2>About Popovers</h2> <p>A popover is used to display contextual information to the user.</p> <p>A popover can accept the following nubbin position classes: <code>.slds-nubbin_left</code>, <code>.slds-nubbin_left-top</code>, <code>.slds-nubbin_left-bottom</code>, <code>.slds-nubbin_top-left</code>, <code>.slds-nubbin_top-right</code>, <code>.slds-nubbin_right-top</code>, <code>.slds-nubbin_right-bottom</code>, <code>.slds-nubbin_bottom-left</code>, <code>.slds-nubbin_bottom-right</code>.</p> <!-- Accessibility --> <h3>Accessibility</h3> <div class="accessibility-info"> <h4>Notable features</h4> <ul> <li>Popovers <strong>must</strong> come with a triggering button</li> <li>They <strong>must</strong> have at least one focusable element inside</li> <li>They <strong>should</strong> be implemented as a keyboard focus trap</li> <li>When triggered, user focus should be placed on the first focusable element that isn't the close button</li> <li>Pressing the Escape key as well as clicking the close button should close the Popover</li> <li>User focus should be placed back on the triggering button when the popover is closed</li> </ul> <h4>Notable attributes</h4> <ul> <li>The Popover element should have <code>role="dialog"</code> applied</li> <li>The <code>dialog</code> should be labelled using <code>aria-labelledby</code> or <code>aria-label</code></li> <li>The <code>dialog</code> should be described using <code>aria-describedby</code></li> <li>The triggering element <strong>must</strong> have <code>aria-haspopup="true"</code> when opened</li> </ul> </div> <!-- Base --> <h2>Base</h2> <div class="demo-section"> <h3>Basic Popover</h3> <div class="popover-container"> <button class="slds-button slds-button_neutral" onclick="togglePopover('base-popover')"> Basic Popover </button> <div id="base-popover" class="slds-popover slds-nubbin_bottom" role="dialog" aria-labelledby="base-popover-body"> <div class="slds-popover__body" id="base-popover-body"> <p>This is a basic popover without a header or footer.</p> </div> </div> </div> </div> <!-- With Header --> <div class="demo-section"> <h3>With Header</h3> <div class="popover-container"> <button class="slds-button slds-button_neutral" onclick="togglePopover('header-popover')"> Popover with Header </button> <div id="header-popover" class="slds-popover slds-nubbin_bottom" role="dialog" aria-labelledby="header-popover-heading" aria-describedby="header-popover-body"> <div class="slds-popover__header"> <h2 id="header-popover-heading" class="slds-popover__header-title">Popover Header</h2> <button class="slds-button slds-button_icon slds-button_icon-small slds-popover__close" onclick="closePopover('header-popover')" title="Close"> <svg class="slds-button__icon" aria-hidden="true"> <use href="#utility-close"></use> </svg> <span class="slds-assistive-text">Close</span> </button> </div> <div class="slds-popover__body" id="header-popover-body"> <p>This popover includes a header with a title and close button.</p> </div> </div> </div> </div> <!-- With Footer --> <div class="demo-section"> <h3>With Footer</h3> <div class="popover-container"> <button class="slds-button slds-button_neutral" onclick="togglePopover('footer-popover')"> Popover with Footer </button> <div id="footer-popover" class="slds-popover slds-nubbin_bottom" role="dialog" aria-labelledby="footer-popover-body"> <div class="slds-popover__body" id="footer-popover-body"> <p>This popover includes a footer with action buttons.</p> </div> <div class="slds-popover__footer"> <button class="slds-button slds-button_neutral" onclick="closePopover('footer-popover')">Cancel</button> <button class="slds-button slds-button_brand">Save</button> </div> </div> </div> </div> <!-- With Badge --> <div class="demo-section"> <h3>With Badge</h3> <div class="popover-container"> <button class="slds-button slds-button_neutral" onclick="togglePopover('badge-popover')"> Popover with Badge </button> <div id="badge-popover" class="slds-popover slds-nubbin_bottom" role="dialog" aria-labelledby="badge-popover-heading" aria-describedby="badge-popover-body"> <div class="slds-popover__header"> <h2 id="badge-popover-heading" class="slds-popover__header-title"> New Feature <span class="slds-badge slds-badge_brand slds-m-left_x-small">Beta</span> </h2> <button class="slds-button slds-button_icon slds-button_icon-small slds-popover__close" onclick="closePopover('badge-popover')" title="Close"> <svg class="slds-button__icon" aria-hidden="true"> <use href="#utility-close"></use> </svg> <span class="slds-assistive-text">Close</span> </button> </div> <div class="slds-popover__body" id="badge-popover-body"> <p>This popover includes a badge in the header to indicate status or category.</p> </div> </div> </div> </div> <!-- Widths --> <h2>Widths</h2> <div class="demo-grid"> <div class="demo-column"> <h3>Small</h3> <div class="popover-container"> <button class="slds-button slds-button_neutral" onclick="togglePopover('small-popover')"> Small Width </button> <div id="small-popover" class="slds-popover slds-popover_small slds-nubbin_bottom" role="dialog" aria-labelledby="small-popover-body"> <div class="slds-popover__body" id="small-popover-body"> <p>Small width popover (20rem/320px).</p> </div> </div> </div> </div> <div class="demo-column"> <h3>Medium</h3> <div class="popover-container"> <button class="slds-button slds-button_neutral" onclick="togglePopover('medium-popover')"> Medium Width </button> <div id="medium-popover" class="slds-popover slds-popover_medium slds-nubbin_bottom" role="dialog" aria-labelledby="medium-popover-body"> <div class="slds-popover__body" id="medium-popover-body"> <p>Medium width popover (25rem/400px).</p> </div> </div> </div> </div> <div class="demo-column"> <h3>Large</h3> <div class="popover-container"> <button class="slds-button slds-button_neutral" onclick="togglePopover('large-popover')"> Large Width </button> <div id="large-popover" class="slds-popover slds-popover_large </div> </div> </div> </div> </div> </div> <div class="hidden rotate-45 text-red-500 bg-red-100 dark:text-red-400 dark:bg-red-900/50 text-green-500 bg-green-100 dark:text-green-400 dark:bg-green-900/50 scheme-light scheme-dark scheme-light-dark"> </div> </main> </body> </html> header-popover <!-- Featured Example --> <div class="demo-section"> <h3>Featured Example</h3> <div class="popover-container"> <button class="slds-button slds-button_brand" onclick="togglePopover('featured-popover')"> Show Popover </button> <div id="featured-popover" class="slds-popover slds-nubbin_bottom" role="dialog" aria-labelledby="featured-popover-heading" aria-describedby="featured-popover-body"> <div class="slds-popover__header"> <h2 id="featured-popover-heading" class="slds-popover__header-title">Featured Popover</h2> <button class="slds-button slds-button_icon slds-button_icon-small slds-popover__close" onclick="closePopover('featured-popover')" title="Close"> <svg class="slds-button__icon" aria-hidden="true"> <use href="#utility-close"></use> </svg> <span class="slds-assistive-text">Close</span> </button> </div> <div class="slds-popover__body" id="featured-popover-body"> <p>This is a featured popover with a header and close button. It demonstrates the basic structure and functionality.</p> </div> </div> </div> </div> <!-- About Popovers --> <h2>About Popovers</h2> <p>A popover is used to display contextual information to the user.</p> <p>A popover can accept the following nubbin position classes: <code>.slds-nubbin_left</code>, <code>.slds-nubbin_left-top</code>, <code>.slds-nubbin_left-bottom</code>, <code>.slds-nubbin_top-left</code>, <code>.slds-nubbin_top-right</code>, <code>.slds-nubbin_right-top</code>, <code>.slds-nubbin_right-bottom</code>, <code>.slds-nubbin_bottom-left</code>, <code>.slds-nubbin_bottom-right</code>.</p> <!-- Accessibility --> <h3>Accessibility</h3> <div class="accessibility-info"> <h4>Notable features</h4> <ul> <li>Popovers <strong>must</strong> come with a triggering button</li> <li>They <strong>must</strong> have at least one focusable element inside</li> <li>They <strong>should</strong> be implemented as a keyboard focus trap</li> <li>When triggered, user focus should be placed on the first focusable element that isn't the close button</li> <li>Pressing the Escape key as well as clicking the close button should close the Popover</li> <li>User focus should be placed back on the triggering button when the popover is closed</li> </ul> <h4>Notable attributes</h4> <ul> <li>The Popover element should have <code>role="dialog"</code> applied</li> <li>The <code>dialog</code> should be labelled using <code>aria-labelledby</code> or <code>aria-label</code></li> <li>The <code>dialog</code> should be described using <code>aria-describedby</code></li> <li>The triggering element <strong>must</strong> have <code>aria-haspopup="true"</code> when opened</li> </ul> </div> <!-- Base --> <h2>Base</h2> <div class="demo-section"> <h3>Basic Popover</h3> <div class="popover-container"> <button class="slds-button slds-button_neutral" onclick="togglePopover('base-popover')"> Basic Popover </button> <div id="base-popover" class="slds-popover slds-nubbin_bottom" role="dialog" aria-labelledby="base-popover-body"> <div class="slds-popover__body" id="base-popover-body"> <p>This is a basic popover without a header or footer.</p> </div> </div> </div> </div> <!-- With Header --> <div class="demo-section"> <h3>With Header</h3> <div class="popover-container"> <button class="slds-button slds-button_neutral" onclick="togglePopover('header-popover')"> Popover with Header </button> <div id="header-popover" class="slds-popover slds-nubbin_bottom" role="dialog" aria-labelledby="header-popover-heading" aria-describedby="header-popover-body"> <div class="slds-popover__header"> <h2 id="header-popover-heading" class="slds-popover__header-title">Popover Header</h2> <button class="slds-button slds-button_icon slds-button_icon-small slds-popover__close" onclick="closePopover('header-popover')" title="Close"> <svg class="slds-button__icon" aria-hidden="true"> <use href="#utility-close"></use> </svg> <span class="slds-assistive-text">Close</span> </button> </div> <div class="slds-popover__body" id="header-popover-body"> <p>This popover includes a header with a title and close button.</p> </div> </div> </div> </div> <!-- With Footer --> <div class="demo-section"> <h3>With Footer</h3> <div class="popover-container"> <button class="slds-button slds-button_neutral" onclick="togglePopover('footer-popover')"> Popover with Footer </button> <div id="footer-popover" class="slds-popover slds-nubbin_bottom" role="dialog" aria-labelledby="footer-popover-body"> <div class="slds-popover__body" id="footer-popover-body"> <p>This popover includes a footer with action buttons.</p> </div> <div class="slds-popover__footer"> <button class="slds-button slds-button_neutral" onclick="closePopover('footer-popover')">Cancel</button> <button class="slds-button slds-button_brand">Save</button> </div> </div> </div> </div> <!-- With Badge --> <div class="demo-section"> <h3>With Badge</h3> <div class="popover-container"> <button class="slds-button slds-button_neutral" onclick="togglePopover('badge-popover')"> Popover with Badge </button> <div id="badge-popover" class="slds-popover slds-nubbin_bottom" role="dialog" aria-labelledby="badge-popover-heading" aria-describedby="badge-popover-body"> <div class="slds-popover__header"> <h2 id="badge-popover-heading" class="slds-popover__header-title"> New Feature <span class="slds-badge slds-badge_brand slds-m-left_x-small">Beta</span> </h2> <button class="slds-button slds-button_icon slds-button_icon-small slds-popover__close" onclick="closePopover('badge-popover')" title="Close"> <svg class="slds-button__icon" aria-hidden="true"> <use href="#utility-close"></use> </svg> <span class="slds-assistive-text">Close</span> </button> </div> <div class="slds-popover__body" id="badge-popover-body"> <p>This popover includes a badge in the header to indicate status or category.</p> </div> </div> </div> </div> <!-- Widths --> <h2>Widths</h2> <div class="demo-grid"> <div class="demo-column"> <h3>Small</h3> <div class="popover-container"> <button class="slds-button slds-button_neutral" onclick="togglePopover('small-popover')"> Small Width </button> <div id="small-popover" class="slds-popover slds-popover_small slds-nubbin_bottom" role="dialog" aria-labelledby="small-popover-body"> <div class="slds-popover__body" id="small-popover-body"> <p>Small width popover (20rem/320px).</p> </div> </div> </div> </div> <div class="demo-column"> <h3>Medium</h3> <div class="popover-container"> <button class="slds-button slds-button_neutral" onclick="togglePopover('medium-popover')"> Medium Width </button> <div id="medium-popover" class="slds-popover slds-popover_medium slds-nubbin_bottom" role="dialog" aria-labelledby="medium-popover-body"> <div class="slds-popover__body" id="medium-popover-body"> <p>Medium width popover (25rem/400px).</p> </div> </div> </div> </div> <div class="demo-column"> <h3>Large</h3> <div class="popover-container"> <button class="slds-button slds-button_neutral" onclick="togglePopover('large-popover')"> Large Width </button> <div id="large-popover" class="slds-popover slds-popover_large </div> </div> </div> </div> </div> </div> <div class="hidden rotate-45 text-red-500 bg-red-100 dark:text-red-400 dark:bg-red-900/50 text-green-500 bg-green-100 dark:text-green-400 dark:bg-green-900/50 scheme-light scheme-dark scheme-light-dark"> </div> </main> </body> </html> )"> <svg class="slds-button__icon" aria-hidden="true"> <use href="#utility-close"></use> </svg> <span class="slds-assistive-text">Close</span> </button> </div> <div class="slds-popover__body" id="header-popover-body"> <p>This popover includes a header with a close button.</p> </div> </div> </div> </div> <div class="demo-section"> <h3>With Footer</h3> <div class="popover-demo-container"> <button class="slds-button slds-button_neutral" aria-haspopup="false" onclick="togglePopover(this, 'footer-popover')"> With Footer </button> <div class="slds-popover slds-nubbin_bottom slds-hide" role="dialog" aria-labelledby="footer-popover-heading" aria-describedby="footer-popover-body" id="footer-popover" style="position: absolute; top: -160px; left: 0;"> <div class="slds-popover__body" id="footer-popover-body"> <p>This popover includes a footer with action buttons.</p> </div> <div class="slds-popover__footer"> <button class="slds-button slds-button_neutral" onclick="closePopover( <!-- Featured Example --> <div class="demo-section"> <h3>Featured Example</h3> <div class="popover-container"> <button class="slds-button slds-button_brand" onclick="togglePopover('featured-popover')"> Show Popover </button> <div id="featured-popover" class="slds-popover slds-nubbin_bottom" role="dialog" aria-labelledby="featured-popover-heading" aria-describedby="featured-popover-body"> <div class="slds-popover__header"> <h2 id="featured-popover-heading" class="slds-popover__header-title">Featured Popover</h2> <button class="slds-button slds-button_icon slds-button_icon-small slds-popover__close" onclick="closePopover('featured-popover')" title="Close"> <svg class="slds-button__icon" aria-hidden="true"> <use href="#utility-close"></use> </svg> <span class="slds-assistive-text">Close</span> </button> </div> <div class="slds-popover__body" id="featured-popover-body"> <p>This is a featured popover with a header and close button. It demonstrates the basic structure and functionality.</p> </div> </div> </div> </div> <!-- About Popovers --> <h2>About Popovers</h2> <p>A popover is used to display contextual information to the user.</p> <p>A popover can accept the following nubbin position classes: <code>.slds-nubbin_left</code>, <code>.slds-nubbin_left-top</code>, <code>.slds-nubbin_left-bottom</code>, <code>.slds-nubbin_top-left</code>, <code>.slds-nubbin_top-right</code>, <code>.slds-nubbin_right-top</code>, <code>.slds-nubbin_right-bottom</code>, <code>.slds-nubbin_bottom-left</code>, <code>.slds-nubbin_bottom-right</code>.</p> <!-- Accessibility --> <h3>Accessibility</h3> <div class="accessibility-info"> <h4>Notable features</h4> <ul> <li>Popovers <strong>must</strong> come with a triggering button</li> <li>They <strong>must</strong> have at least one focusable element inside</li> <li>They <strong>should</strong> be implemented as a keyboard focus trap</li> <li>When triggered, user focus should be placed on the first focusable element that isn't the close button</li> <li>Pressing the Escape key as well as clicking the close button should close the Popover</li> <li>User focus should be placed back on the triggering button when the popover is closed</li> </ul> <h4>Notable attributes</h4> <ul> <li>The Popover element should have <code>role="dialog"</code> applied</li> <li>The <code>dialog</code> should be labelled using <code>aria-labelledby</code> or <code>aria-label</code></li> <li>The <code>dialog</code> should be described using <code>aria-describedby</code></li> <li>The triggering element <strong>must</strong> have <code>aria-haspopup="true"</code> when opened</li> </ul> </div> <!-- Base --> <h2>Base</h2> <div class="demo-section"> <h3>Basic Popover</h3> <div class="popover-container"> <button class="slds-button slds-button_neutral" onclick="togglePopover('base-popover')"> Basic Popover </button> <div id="base-popover" class="slds-popover slds-nubbin_bottom" role="dialog" aria-labelledby="base-popover-body"> <div class="slds-popover__body" id="base-popover-body"> <p>This is a basic popover without a header or footer.</p> </div> </div> </div> </div> <!-- With Header --> <div class="demo-section"> <h3>With Header</h3> <div class="popover-container"> <button class="slds-button slds-button_neutral" onclick="togglePopover('header-popover')"> Popover with Header </button> <div id="header-popover" class="slds-popover slds-nubbin_bottom" role="dialog" aria-labelledby="header-popover-heading" aria-describedby="header-popover-body"> <div class="slds-popover__header"> <h2 id="header-popover-heading" class="slds-popover__header-title">Popover Header</h2> <button class="slds-button slds-button_icon slds-button_icon-small slds-popover__close" onclick="closePopover('header-popover')" title="Close"> <svg class="slds-button__icon" aria-hidden="true"> <use href="#utility-close"></use> </svg> <span class="slds-assistive-text">Close</span> </button> </div> <div class="slds-popover__body" id="header-popover-body"> <p>This popover includes a header with a title and close button.</p> </div> </div> </div> </div> <!-- With Footer --> <div class="demo-section"> <h3>With Footer</h3> <div class="popover-container"> <button class="slds-button slds-button_neutral" onclick="togglePopover('footer-popover')"> Popover with Footer </button> <div id="footer-popover" class="slds-popover slds-nubbin_bottom" role="dialog" aria-labelledby="footer-popover-body"> <div class="slds-popover__body" id="footer-popover-body"> <p>This popover includes a footer with action buttons.</p> </div> <div class="slds-popover__footer"> <button class="slds-button slds-button_neutral" onclick="closePopover('footer-popover')">Cancel</button> <button class="slds-button slds-button_brand">Save</button> </div> </div> </div> </div> <!-- With Badge --> <div class="demo-section"> <h3>With Badge</h3> <div class="popover-container"> <button class="slds-button slds-button_neutral" onclick="togglePopover('badge-popover')"> Popover with Badge </button> <div id="badge-popover" class="slds-popover slds-nubbin_bottom" role="dialog" aria-labelledby="badge-popover-heading" aria-describedby="badge-popover-body"> <div class="slds-popover__header"> <h2 id="badge-popover-heading" class="slds-popover__header-title"> New Feature <span class="slds-badge slds-badge_brand slds-m-left_x-small">Beta</span> </h2> <button class="slds-button slds-button_icon slds-button_icon-small slds-popover__close" onclick="closePopover('badge-popover')" title="Close"> <svg class="slds-button__icon" aria-hidden="true"> <use href="#utility-close"></use> </svg> <span class="slds-assistive-text">Close</span> </button> </div> <div class="slds-popover__body" id="badge-popover-body"> <p>This popover includes a badge in the header to indicate status or category.</p> </div> </div> </div> </div> <!-- Widths --> <h2>Widths</h2> <div class="demo-grid"> <div class="demo-column"> <h3>Small</h3> <div class="popover-container"> <button class="slds-button slds-button_neutral" onclick="togglePopover('small-popover')"> Small Width </button> <div id="small-popover" class="slds-popover slds-popover_small slds-nubbin_bottom" role="dialog" aria-labelledby="small-popover-body"> <div class="slds-popover__body" id="small-popover-body"> <p>Small width popover (20rem/320px).</p> </div> </div> </div> </div> <div class="demo-column"> <h3>Medium</h3> <div class="popover-container"> <button class="slds-button slds-button_neutral" onclick="togglePopover('medium-popover')"> Medium Width </button> <div id="medium-popover" class="slds-popover slds-popover_medium slds-nubbin_bottom" role="dialog" aria-labelledby="medium-popover-body"> <div class="slds-popover__body" id="medium-popover-body"> <p>Medium width popover (25rem/400px).</p> </div> </div> </div> </div> <div class="demo-column"> <h3>Large</h3> <div class="popover-container"> <button class="slds-button slds-button_neutral" onclick="togglePopover('large-popover')"> Large Width </button> <div id="large-popover" class="slds-popover slds-popover_large </div> </div> </div> </div> </div> </div> <div class="hidden rotate-45 text-red-500 bg-red-100 dark:text-red-400 dark:bg-red-900/50 text-green-500 bg-green-100 dark:text-green-400 dark:bg-green-900/50 scheme-light scheme-dark scheme-light-dark"> </div> </main> </body> </html> footer-popover <!-- Featured Example --> <div class="demo-section"> <h3>Featured Example</h3> <div class="popover-container"> <button class="slds-button slds-button_brand" onclick="togglePopover('featured-popover')"> Show Popover </button> <div id="featured-popover" class="slds-popover slds-nubbin_bottom" role="dialog" aria-labelledby="featured-popover-heading" aria-describedby="featured-popover-body"> <div class="slds-popover__header"> <h2 id="featured-popover-heading" class="slds-popover__header-title">Featured Popover</h2> <button class="slds-button slds-button_icon slds-button_icon-small slds-popover__close" onclick="closePopover('featured-popover')" title="Close"> <svg class="slds-button__icon" aria-hidden="true"> <use href="#utility-close"></use> </svg> <span class="slds-assistive-text">Close</span> </button> </div> <div class="slds-popover__body" id="featured-popover-body"> <p>This is a featured popover with a header and close button. It demonstrates the basic structure and functionality.</p> </div> </div> </div> </div> <!-- About Popovers --> <h2>About Popovers</h2> <p>A popover is used to display contextual information to the user.</p> <p>A popover can accept the following nubbin position classes: <code>.slds-nubbin_left</code>, <code>.slds-nubbin_left-top</code>, <code>.slds-nubbin_left-bottom</code>, <code>.slds-nubbin_top-left</code>, <code>.slds-nubbin_top-right</code>, <code>.slds-nubbin_right-top</code>, <code>.slds-nubbin_right-bottom</code>, <code>.slds-nubbin_bottom-left</code>, <code>.slds-nubbin_bottom-right</code>.</p> <!-- Accessibility --> <h3>Accessibility</h3> <div class="accessibility-info"> <h4>Notable features</h4> <ul> <li>Popovers <strong>must</strong> come with a triggering button</li> <li>They <strong>must</strong> have at least one focusable element inside</li> <li>They <strong>should</strong> be implemented as a keyboard focus trap</li> <li>When triggered, user focus should be placed on the first focusable element that isn't the close button</li> <li>Pressing the Escape key as well as clicking the close button should close the Popover</li> <li>User focus should be placed back on the triggering button when the popover is closed</li> </ul> <h4>Notable attributes</h4> <ul> <li>The Popover element should have <code>role="dialog"</code> applied</li> <li>The <code>dialog</code> should be labelled using <code>aria-labelledby</code> or <code>aria-label</code></li> <li>The <code>dialog</code> should be described using <code>aria-describedby</code></li> <li>The triggering element <strong>must</strong> have <code>aria-haspopup="true"</code> when opened</li> </ul> </div> <!-- Base --> <h2>Base</h2> <div class="demo-section"> <h3>Basic Popover</h3> <div class="popover-container"> <button class="slds-button slds-button_neutral" onclick="togglePopover('base-popover')"> Basic Popover </button> <div id="base-popover" class="slds-popover slds-nubbin_bottom" role="dialog" aria-labelledby="base-popover-body"> <div class="slds-popover__body" id="base-popover-body"> <p>This is a basic popover without a header or footer.</p> </div> </div> </div> </div> <!-- With Header --> <div class="demo-section"> <h3>With Header</h3> <div class="popover-container"> <button class="slds-button slds-button_neutral" onclick="togglePopover('header-popover')"> Popover with Header </button> <div id="header-popover" class="slds-popover slds-nubbin_bottom" role="dialog" aria-labelledby="header-popover-heading" aria-describedby="header-popover-body"> <div class="slds-popover__header"> <h2 id="header-popover-heading" class="slds-popover__header-title">Popover Header</h2> <button class="slds-button slds-button_icon slds-button_icon-small slds-popover__close" onclick="closePopover('header-popover')" title="Close"> <svg class="slds-button__icon" aria-hidden="true"> <use href="#utility-close"></use> </svg> <span class="slds-assistive-text">Close</span> </button> </div> <div class="slds-popover__body" id="header-popover-body"> <p>This popover includes a header with a title and close button.</p> </div> </div> </div> </div> <!-- With Footer --> <div class="demo-section"> <h3>With Footer</h3> <div class="popover-container"> <button class="slds-button slds-button_neutral" onclick="togglePopover('footer-popover')"> Popover with Footer </button> <div id="footer-popover" class="slds-popover slds-nubbin_bottom" role="dialog" aria-labelledby="footer-popover-body"> <div class="slds-popover__body" id="footer-popover-body"> <p>This popover includes a footer with action buttons.</p> </div> <div class="slds-popover__footer"> <button class="slds-button slds-button_neutral" onclick="closePopover('footer-popover')">Cancel</button> <button class="slds-button slds-button_brand">Save</button> </div> </div> </div> </div> <!-- With Badge --> <div class="demo-section"> <h3>With Badge</h3> <div class="popover-container"> <button class="slds-button slds-button_neutral" onclick="togglePopover('badge-popover')"> Popover with Badge </button> <div id="badge-popover" class="slds-popover slds-nubbin_bottom" role="dialog" aria-labelledby="badge-popover-heading" aria-describedby="badge-popover-body"> <div class="slds-popover__header"> <h2 id="badge-popover-heading" class="slds-popover__header-title"> New Feature <span class="slds-badge slds-badge_brand slds-m-left_x-small">Beta</span> </h2> <button class="slds-button slds-button_icon slds-button_icon-small slds-popover__close" onclick="closePopover('badge-popover')" title="Close"> <svg class="slds-button__icon" aria-hidden="true"> <use href="#utility-close"></use> </svg> <span class="slds-assistive-text">Close</span> </button> </div> <div class="slds-popover__body" id="badge-popover-body"> <p>This popover includes a badge in the header to indicate status or category.</p> </div> </div> </div> </div> <!-- Widths --> <h2>Widths</h2> <div class="demo-grid"> <div class="demo-column"> <h3>Small</h3> <div class="popover-container"> <button class="slds-button slds-button_neutral" onclick="togglePopover('small-popover')"> Small Width </button> <div id="small-popover" class="slds-popover slds-popover_small slds-nubbin_bottom" role="dialog" aria-labelledby="small-popover-body"> <div class="slds-popover__body" id="small-popover-body"> <p>Small width popover (20rem/320px).</p> </div> </div> </div> </div> <div class="demo-column"> <h3>Medium</h3> <div class="popover-container"> <button class="slds-button slds-button_neutral" onclick="togglePopover('medium-popover')"> Medium Width </button> <div id="medium-popover" class="slds-popover slds-popover_medium slds-nubbin_bottom" role="dialog" aria-labelledby="medium-popover-body"> <div class="slds-popover__body" id="medium-popover-body"> <p>Medium width popover (25rem/400px).</p> </div> </div> </div> </div> <div class="demo-column"> <h3>Large</h3> <div class="popover-container"> <button class="slds-button slds-button_neutral" onclick="togglePopover('large-popover')"> Large Width </button> <div id="large-popover" class="slds-popover slds-popover_large </div> </div> </div> </div> </div> </div> <div class="hidden rotate-45 text-red-500 bg-red-100 dark:text-red-400 dark:bg-red-900/50 text-green-500 bg-green-100 dark:text-green-400 dark:bg-green-900/50 scheme-light scheme-dark scheme-light-dark"> </div> </main> </body> </html> )">Cancel</button> <button class="slds-button slds-button_brand">Save</button> </div> </div> </div> </div> <div class="demo-section"> <h3>With Badge</h3> <div class="popover-demo-container"> <button class="slds-button slds-button_neutral" aria-haspopup="false" onclick="togglePopover(this, 'badge-popover')"> With Badge </button> <div class="slds-popover slds-nubbin_bottom slds-hide" role="dialog" aria-labelledby="badge-popover-heading" aria-describedby="badge-popover-body" id="badge-popover" style="position: absolute; top: -120px; left: 0;"> <div class="slds-popover__body" id="badge-popover-body"> <div class="slds-media"> <div class="slds-media__figure"> <span class="slds-badge slds-badge_lightest">New</span> </div> <div class="slds-media__body"> <p>This popover includes a badge element.</p> </div> </div> </div> </div> </div> </div> <!-- Widths --> <h2>Widths</h2> <div class="demo-grid"> <div class="demo-column"> <h3>Small</h3> <div class="popover-demo-container"> <button class="slds-button slds-button_neutral" aria-haspopup="false" onclick="togglePopover(this, 'small-popover')"> Small Width </button> <div class="slds-popover slds-popover_small slds-nubbin_bottom slds-hide" role="dialog" id="small-popover" style="position: absolute; top: -100px; left: 0;"> <div class="slds-popover__body"> <p>Small width popover.</p> </div> </div> </div> </div> <div class="demo-column"> <h3>Medium</h3> <div class="popover-demo-container"> <button class="slds-button slds-button_neutral" aria-haspopup="false" onclick="togglePopover(this, 'medium-popover')"> Medium Width </button> <div class="slds-popover slds-popover_medium slds-nubbin_bottom slds-hide" role="dialog" id="medium-popover" style="position: absolute; top: -100px; left: 0;"> <div class="slds-popover__body"> <p>Medium width popover with more content space.</p> </div> </div> </div> </div> <div class="demo-column"> <h3>Large</h3> <div class="popover-demo-container"> <button class="slds-button slds-button_neutral" aria-haspopup="false" onclick="togglePopover(this, 'large-popover')"> Large Width </button> <div class="slds-popover slds-popover_large slds-nubbin_bottom slds-hide" role="dialog" id="large-popover" style="position: absolute; top: -100px; left: 0;"> <div class="slds-popover__body"> <p>Large width popover with extensive content space for detailed information.</p> </div> </div> </div> </div> </div> <!-- Nubbins --> <h2>Nubbins</h2> <h3>Left</h3> <div class="demo-grid"> <div class="demo-column"> <strong>Left</strong> <div class="popover-demo-container"> <button class="slds-button slds-button_neutral" onclick="togglePopover(this, 'left-popover')">Left</button> <div class="slds-popover slds-nubbin_left slds-hide" role="dialog" id="left-popover" style="position: absolute; top: -50px; left: 120px;"> <div class="slds-popover__body"> <p>Left nubbin popover.</p> </div> </div> </div> </div> <div class="demo-column"> <strong>Left Top</strong> <div class="popover-demo-container"> <button class="slds-button slds-button_neutral" onclick="togglePopover(this, 'left-top-popover')">Left Top</button> <div class="slds-popover slds-nubbin_left-top slds-hide" role="dialog" id="left-top-popover" style="position: absolute; top: -20px; left: 120px;"> <div class="slds-popover__body"> <p>Left top nubbin popover.</p> </div> </div> </div> </div> <div class="demo-column"> <strong>Left Bottom</strong> <div class="popover-demo-container"> <button class="slds-button slds-button_neutral" onclick="togglePopover(this, 'left-bottom-popover')">Left Bottom</button> <div class="slds-popover slds-nubbin_left-bottom slds-hide" role="dialog" id="left-bottom-popover" style="position: absolute; top: -80px; left: 120px;"> <div class="slds-popover__body"> <p>Left bottom nubbin popover.</p> </div> </div> </div> </div> </div> <h3>Right</h3> <div class="demo-grid"> <div class="demo-column"> <strong>Right</strong> <div class="popover-demo-container"> <button class="slds-button slds-button_neutral" onclick="togglePopover(this, 'right-popover')">Right</button> <div class="slds-popover slds-nubbin_right slds-hide" role="dialog" id="right-popover" style="position: absolute; top: -50px; right: 120px;"> <div class="slds-popover__body"> <p>Right nubbin popover.</p> </div> </div> </div> </div> <div class="demo-column"> <strong>Right Top</strong> <div class="popover-demo-container"> <button class="slds-button slds-button_neutral" onclick="togglePopover(this, 'right-top-popover')">Right Top</button> <div class="slds-popover slds-nubbin_right-top slds-hide" role="dialog" id="right-top-popover" style="position: absolute; top: -20px; right: 120px;"> <div class="slds-popover__body"> <p>Right top nubbin popover.</p> </div> </div> </div> </div> <div class="demo-column"> <strong>Right Bottom</strong> <div class="popover-demo-container"> <button class="slds-button slds-button_neutral" onclick="togglePopover(this, 'right-bottom-popover')">Right Bottom</button> <div class="slds-popover slds-nubbin_right-bottom slds-hide" role="dialog" id="right-bottom-popover" style="position: absolute; top: -80px; right: 120px;"> <div class="slds-popover__body"> <p>Right bottom nubbin popover.</p> </div> </div> </div> </div> </div> <h3>Top</h3> <div class="demo-grid"> <div class="demo-column"> <strong>Top</strong> <div class="popover-demo-container"> <button class="slds-button slds-button_neutral" onclick="togglePopover(this, 'top-popover')">Top</button> <div class="slds-popover slds-nubbin_top slds-hide" role="dialog" id="top-popover" style="position: absolute; bottom: -100px; left: 0;"> <div class="slds-popover__body"> <p>Top nubbin popover.</p> </div> </div> </div> </div> <div class="demo-column"> <strong>Top Left</strong> <div class="popover-demo-container"> <button class="slds-button slds-button_neutral" onclick="togglePopover(this, 'top-left-popover')">Top Left</button> <div class="slds-popover slds-nubbin_top-left slds-hide" role="dialog" id="top-left-popover" style="position: absolute; bottom: -100px; left: 0;"> <div class="slds-popover__body"> <p>Top left nubbin popover.</p> </div> </div> </div> </div> <div class="demo-column"> <strong>Top Right</strong> <div class="popover-demo-container"> <button class="slds-button slds-button_neutral" onclick="togglePopover(this, 'top-right-popover')">Top Right</button> <div class="slds-popover slds-nubbin_top-right slds-hide" role="dialog" id="top-right-popover" style="position: absolute; bottom: -100px; right: 0;"> <div class="slds-popover__body"> <p>Top right nubbin popover.</p> </div> </div> </div> </div> </div> <!-- Feedback States --> <h2>Feedback States</h2> <div class="demo-section"> <h3>Error</h3> <div class="popover-demo-container"> <button class="slds-button slds-button_neutral" onclick="togglePopover(this, 'error-popover')">Error Popover</button> <div class="slds-popover slds-popover_error slds-nubbin_bottom slds-hide" role="dialog" id="error-popover" style="position: absolute; top: -120px; left: 0;"> <div class="slds-popover__body"> <div class="slds-media"> <div class="slds-media__figure"> <span class="slds-icon_container slds-icon-utility-error"> <svg class="slds-icon slds-icon_x-small" aria-hidden="true"> <use href="#utility-error"></use> </svg> </span> </div> <div class="slds-media__body"> <p>This is an error message in a popover.</p> </div> </div> </div> </div> </div> </div> <div class="demo-section"> <h3>Warning</h3> <div class="popover-demo-container"> <button class="slds-button slds-button_neutral" onclick="togglePopover(this, 'warning-popover')">Warning Popover</button> <div class="slds-popover slds-popover_warning slds-nubbin_bottom slds-hide" role="dialog" id="warning-popover" style="position: absolute; top: -120px; left: 0;"> <div class="slds-popover__body"> <div class="slds-media"> <div class="slds-media__figure"> <span class="slds-icon_container slds-icon-utility-warning"> <svg class="slds-icon slds-icon_x-small" aria-hidden="true"> <use href="#utility-warning"></use> </svg> </span> </div> <div class="slds-media__body"> <p>This is a warning message in a popover.</p> </div> </div> </div> </div> </div> </div> <!-- Examples --> <h2>Examples</h2> <div class="demo-section"> <h3>Walkthrough</h3> <div class="popover-demo-container"> <button class="slds-button slds-button_neutral" onclick="togglePopover(this, 'walkthrough-popover')">Walkthrough</button> <div class="slds-popover slds-popover_walkthrough slds-nubbin_bottom slds-hide" role="dialog" id="walkthrough-popover" style="position: absolute; top: -180px; left: 0;"> <div class="slds-popover__header"> <h2 class="slds-text-heading_small">Step 1 of 3</h2> </div> <div class="slds-popover__body"> <p>Welcome to the walkthrough! This will guide you through the key features.</p> </div> <div class="slds-popover__footer"> <button class="slds-button slds-button_neutral" onclick="closePopover( <!-- Featured Example --> <div class="demo-section"> <h3>Featured Example</h3> <div class="popover-container"> <button class="slds-button slds-button_brand" onclick="togglePopover('featured-popover')"> Show Popover </button> <div id="featured-popover" class="slds-popover slds-nubbin_bottom" role="dialog" aria-labelledby="featured-popover-heading" aria-describedby="featured-popover-body"> <div class="slds-popover__header"> <h2 id="featured-popover-heading" class="slds-popover__header-title">Featured Popover</h2> <button class="slds-button slds-button_icon slds-button_icon-small slds-popover__close" onclick="closePopover('featured-popover')" title="Close"> <svg class="slds-button__icon" aria-hidden="true"> <use href="#utility-close"></use> </svg> <span class="slds-assistive-text">Close</span> </button> </div> <div class="slds-popover__body" id="featured-popover-body"> <p>This is a featured popover with a header and close button. It demonstrates the basic structure and functionality.</p> </div> </div> </div> </div> <!-- About Popovers --> <h2>About Popovers</h2> <p>A popover is used to display contextual information to the user.</p> <p>A popover can accept the following nubbin position classes: <code>.slds-nubbin_left</code>, <code>.slds-nubbin_left-top</code>, <code>.slds-nubbin_left-bottom</code>, <code>.slds-nubbin_top-left</code>, <code>.slds-nubbin_top-right</code>, <code>.slds-nubbin_right-top</code>, <code>.slds-nubbin_right-bottom</code>, <code>.slds-nubbin_bottom-left</code>, <code>.slds-nubbin_bottom-right</code>.</p> <!-- Accessibility --> <h3>Accessibility</h3> <div class="accessibility-info"> <h4>Notable features</h4> <ul> <li>Popovers <strong>must</strong> come with a triggering button</li> <li>They <strong>must</strong> have at least one focusable element inside</li> <li>They <strong>should</strong> be implemented as a keyboard focus trap</li> <li>When triggered, user focus should be placed on the first focusable element that isn't the close button</li> <li>Pressing the Escape key as well as clicking the close button should close the Popover</li> <li>User focus should be placed back on the triggering button when the popover is closed</li> </ul> <h4>Notable attributes</h4> <ul> <li>The Popover element should have <code>role="dialog"</code> applied</li> <li>The <code>dialog</code> should be labelled using <code>aria-labelledby</code> or <code>aria-label</code></li> <li>The <code>dialog</code> should be described using <code>aria-describedby</code></li> <li>The triggering element <strong>must</strong> have <code>aria-haspopup="true"</code> when opened</li> </ul> </div> <!-- Base --> <h2>Base</h2> <div class="demo-section"> <h3>Basic Popover</h3> <div class="popover-container"> <button class="slds-button slds-button_neutral" onclick="togglePopover('base-popover')"> Basic Popover </button> <div id="base-popover" class="slds-popover slds-nubbin_bottom" role="dialog" aria-labelledby="base-popover-body"> <div class="slds-popover__body" id="base-popover-body"> <p>This is a basic popover without a header or footer.</p> </div> </div> </div> </div> <!-- With Header --> <div class="demo-section"> <h3>With Header</h3> <div class="popover-container"> <button class="slds-button slds-button_neutral" onclick="togglePopover('header-popover')"> Popover with Header </button> <div id="header-popover" class="slds-popover slds-nubbin_bottom" role="dialog" aria-labelledby="header-popover-heading" aria-describedby="header-popover-body"> <div class="slds-popover__header"> <h2 id="header-popover-heading" class="slds-popover__header-title">Popover Header</h2> <button class="slds-button slds-button_icon slds-button_icon-small slds-popover__close" onclick="closePopover('header-popover')" title="Close"> <svg class="slds-button__icon" aria-hidden="true"> <use href="#utility-close"></use> </svg> <span class="slds-assistive-text">Close</span> </button> </div> <div class="slds-popover__body" id="header-popover-body"> <p>This popover includes a header with a title and close button.</p> </div> </div> </div> </div> <!-- With Footer --> <div class="demo-section"> <h3>With Footer</h3> <div class="popover-container"> <button class="slds-button slds-button_neutral" onclick="togglePopover('footer-popover')"> Popover with Footer </button> <div id="footer-popover" class="slds-popover slds-nubbin_bottom" role="dialog" aria-labelledby="footer-popover-body"> <div class="slds-popover__body" id="footer-popover-body"> <p>This popover includes a footer with action buttons.</p> </div> <div class="slds-popover__footer"> <button class="slds-button slds-button_neutral" onclick="closePopover('footer-popover')">Cancel</button> <button class="slds-button slds-button_brand">Save</button> </div> </div> </div> </div> <!-- With Badge --> <div class="demo-section"> <h3>With Badge</h3> <div class="popover-container"> <button class="slds-button slds-button_neutral" onclick="togglePopover('badge-popover')"> Popover with Badge </button> <div id="badge-popover" class="slds-popover slds-nubbin_bottom" role="dialog" aria-labelledby="badge-popover-heading" aria-describedby="badge-popover-body"> <div class="slds-popover__header"> <h2 id="badge-popover-heading" class="slds-popover__header-title"> New Feature <span class="slds-badge slds-badge_brand slds-m-left_x-small">Beta</span> </h2> <button class="slds-button slds-button_icon slds-button_icon-small slds-popover__close" onclick="closePopover('badge-popover')" title="Close"> <svg class="slds-button__icon" aria-hidden="true"> <use href="#utility-close"></use> </svg> <span class="slds-assistive-text">Close</span> </button> </div> <div class="slds-popover__body" id="badge-popover-body"> <p>This popover includes a badge in the header to indicate status or category.</p> </div> </div> </div> </div> <!-- Widths --> <h2>Widths</h2> <div class="demo-grid"> <div class="demo-column"> <h3>Small</h3> <div class="popover-container"> <button class="slds-button slds-button_neutral" onclick="togglePopover('small-popover')"> Small Width </button> <div id="small-popover" class="slds-popover slds-popover_small slds-nubbin_bottom" role="dialog" aria-labelledby="small-popover-body"> <div class="slds-popover__body" id="small-popover-body"> <p>Small width popover (20rem/320px).</p> </div> </div> </div> </div> <div class="demo-column"> <h3>Medium</h3> <div class="popover-container"> <button class="slds-button slds-button_neutral" onclick="togglePopover('medium-popover')"> Medium Width </button> <div id="medium-popover" class="slds-popover slds-popover_medium slds-nubbin_bottom" role="dialog" aria-labelledby="medium-popover-body"> <div class="slds-popover__body" id="medium-popover-body"> <p>Medium width popover (25rem/400px).</p> </div> </div> </div> </div> <div class="demo-column"> <h3>Large</h3> <div class="popover-container"> <button class="slds-button slds-button_neutral" onclick="togglePopover('large-popover')"> Large Width </button> <div id="large-popover" class="slds-popover slds-popover_large </div> </div> </div> </div> </div> </div> <div class="hidden rotate-45 text-red-500 bg-red-100 dark:text-red-400 dark:bg-red-900/50 text-green-500 bg-green-100 dark:text-green-400 dark:bg-green-900/50 scheme-light scheme-dark scheme-light-dark"> </div> </main> </body> </html> walkthrough-popover <!-- Featured Example --> <div class="demo-section"> <h3>Featured Example</h3> <div class="popover-container"> <button class="slds-button slds-button_brand" onclick="togglePopover('featured-popover')"> Show Popover </button> <div id="featured-popover" class="slds-popover slds-nubbin_bottom" role="dialog" aria-labelledby="featured-popover-heading" aria-describedby="featured-popover-body"> <div class="slds-popover__header"> <h2 id="featured-popover-heading" class="slds-popover__header-title">Featured Popover</h2> <button class="slds-button slds-button_icon slds-button_icon-small slds-popover__close" onclick="closePopover('featured-popover')" title="Close"> <svg class="slds-button__icon" aria-hidden="true"> <use href="#utility-close"></use> </svg> <span class="slds-assistive-text">Close</span> </button> </div> <div class="slds-popover__body" id="featured-popover-body"> <p>This is a featured popover with a header and close button. It demonstrates the basic structure and functionality.</p> </div> </div> </div> </div> <!-- About Popovers --> <h2>About Popovers</h2> <p>A popover is used to display contextual information to the user.</p> <p>A popover can accept the following nubbin position classes: <code>.slds-nubbin_left</code>, <code>.slds-nubbin_left-top</code>, <code>.slds-nubbin_left-bottom</code>, <code>.slds-nubbin_top-left</code>, <code>.slds-nubbin_top-right</code>, <code>.slds-nubbin_right-top</code>, <code>.slds-nubbin_right-bottom</code>, <code>.slds-nubbin_bottom-left</code>, <code>.slds-nubbin_bottom-right</code>.</p> <!-- Accessibility --> <h3>Accessibility</h3> <div class="accessibility-info"> <h4>Notable features</h4> <ul> <li>Popovers <strong>must</strong> come with a triggering button</li> <li>They <strong>must</strong> have at least one focusable element inside</li> <li>They <strong>should</strong> be implemented as a keyboard focus trap</li> <li>When triggered, user focus should be placed on the first focusable element that isn't the close button</li> <li>Pressing the Escape key as well as clicking the close button should close the Popover</li> <li>User focus should be placed back on the triggering button when the popover is closed</li> </ul> <h4>Notable attributes</h4> <ul> <li>The Popover element should have <code>role="dialog"</code> applied</li> <li>The <code>dialog</code> should be labelled using <code>aria-labelledby</code> or <code>aria-label</code></li> <li>The <code>dialog</code> should be described using <code>aria-describedby</code></li> <li>The triggering element <strong>must</strong> have <code>aria-haspopup="true"</code> when opened</li> </ul> </div> <!-- Base --> <h2>Base</h2> <div class="demo-section"> <h3>Basic Popover</h3> <div class="popover-container"> <button class="slds-button slds-button_neutral" onclick="togglePopover('base-popover')"> Basic Popover </button> <div id="base-popover" class="slds-popover slds-nubbin_bottom" role="dialog" aria-labelledby="base-popover-body"> <div class="slds-popover__body" id="base-popover-body"> <p>This is a basic popover without a header or footer.</p> </div> </div> </div> </div> <!-- With Header --> <div class="demo-section"> <h3>With Header</h3> <div class="popover-container"> <button class="slds-button slds-button_neutral" onclick="togglePopover('header-popover')"> Popover with Header </button> <div id="header-popover" class="slds-popover slds-nubbin_bottom" role="dialog" aria-labelledby="header-popover-heading" aria-describedby="header-popover-body"> <div class="slds-popover__header"> <h2 id="header-popover-heading" class="slds-popover__header-title">Popover Header</h2> <button class="slds-button slds-button_icon slds-button_icon-small slds-popover__close" onclick="closePopover('header-popover')" title="Close"> <svg class="slds-button__icon" aria-hidden="true"> <use href="#utility-close"></use> </svg> <span class="slds-assistive-text">Close</span> </button> </div> <div class="slds-popover__body" id="header-popover-body"> <p>This popover includes a header with a title and close button.</p> </div> </div> </div> </div> <!-- With Footer --> <div class="demo-section"> <h3>With Footer</h3> <div class="popover-container"> <button class="slds-button slds-button_neutral" onclick="togglePopover('footer-popover')"> Popover with Footer </button> <div id="footer-popover" class="slds-popover slds-nubbin_bottom" role="dialog" aria-labelledby="footer-popover-body"> <div class="slds-popover__body" id="footer-popover-body"> <p>This popover includes a footer with action buttons.</p> </div> <div class="slds-popover__footer"> <button class="slds-button slds-button_neutral" onclick="closePopover('footer-popover')">Cancel</button> <button class="slds-button slds-button_brand">Save</button> </div> </div> </div> </div> <!-- With Badge --> <div class="demo-section"> <h3>With Badge</h3> <div class="popover-container"> <button class="slds-button slds-button_neutral" onclick="togglePopover('badge-popover')"> Popover with Badge </button> <div id="badge-popover" class="slds-popover slds-nubbin_bottom" role="dialog" aria-labelledby="badge-popover-heading" aria-describedby="badge-popover-body"> <div class="slds-popover__header"> <h2 id="badge-popover-heading" class="slds-popover__header-title"> New Feature <span class="slds-badge slds-badge_brand slds-m-left_x-small">Beta</span> </h2> <button class="slds-button slds-button_icon slds-button_icon-small slds-popover__close" onclick="closePopover('badge-popover')" title="Close"> <svg class="slds-button__icon" aria-hidden="true"> <use href="#utility-close"></use> </svg> <span class="slds-assistive-text">Close</span> </button> </div> <div class="slds-popover__body" id="badge-popover-body"> <p>This popover includes a badge in the header to indicate status or category.</p> </div> </div> </div> </div> <!-- Widths --> <h2>Widths</h2> <div class="demo-grid"> <div class="demo-column"> <h3>Small</h3> <div class="popover-container"> <button class="slds-button slds-button_neutral" onclick="togglePopover('small-popover')"> Small Width </button> <div id="small-popover" class="slds-popover slds-popover_small slds-nubbin_bottom" role="dialog" aria-labelledby="small-popover-body"> <div class="slds-popover__body" id="small-popover-body"> <p>Small width popover (20rem/320px).</p> </div> </div> </div> </div> <div class="demo-column"> <h3>Medium</h3> <div class="popover-container"> <button class="slds-button slds-button_neutral" onclick="togglePopover('medium-popover')"> Medium Width </button> <div id="medium-popover" class="slds-popover slds-popover_medium slds-nubbin_bottom" role="dialog" aria-labelledby="medium-popover-body"> <div class="slds-popover__body" id="medium-popover-body"> <p>Medium width popover (25rem/400px).</p> </div> </div> </div> </div> <div class="demo-column"> <h3>Large</h3> <div class="popover-container"> <button class="slds-button slds-button_neutral" onclick="togglePopover('large-popover')"> Large Width </button> <div id="large-popover" class="slds-popover slds-popover_large </div> </div> </div> </div> </div> </div> <div class="hidden rotate-45 text-red-500 bg-red-100 dark:text-red-400 dark:bg-red-900/50 text-green-500 bg-green-100 dark:text-green-400 dark:bg-green-900/50 scheme-light scheme-dark scheme-light-dark"> </div> </main> </body> </html> )">Skip</button> <button class="slds-button slds-button_brand">Next</button> </div> </div> </div> </div> <div class="demo-section"> <h3>Feature</h3> <div class="popover-demo-container"> <button class="slds-button slds-button_neutral" onclick="togglePopover(this, 'feature-popover')">Feature</button> <div class="slds-popover slds-popover_feature slds-nubbin_bottom slds-hide" role="dialog" id="feature-popover" style="position: absolute; top: -160px; left: 0;"> <div class="slds-popover__body"> <div class="slds-media"> <div class="slds-media__figure"> <span class="slds-icon_container slds-icon-utility-info"> <svg class="slds-icon slds-icon_small" aria-hidden="true"> <use href="#utility-info"></use> </svg> </span> </div> <div class="slds-media__body"> <h3 class="slds-text-heading_small">New Feature</h3> <p>Check out this new feature that will help improve your workflow.</p> </div> </div> </div> </div> </div> </div> <div class="demo-section"> <h3>Record Preview Panel</h3> <div class="popover-demo-container"> <button class="slds-button slds-button_neutral" onclick="togglePopover(this </div> <!-- Featured Example --> <div class="demo-section"> <h3>Featured Example</h3> <div class="popover-container"> <button class="slds-button slds-button_brand" onclick="togglePopover('featured-popover')"> Show Popover </button> <div id="featured-popover" class="slds-popover slds-nubbin_bottom" role="dialog" aria-labelledby="featured-popover-heading" aria-describedby="featured-popover-body"> <div class="slds-popover__header"> <h2 id="featured-popover-heading" class="slds-popover__header-title">Featured Popover</h2> <button class="slds-button slds-button_icon slds-button_icon-small slds-popover__close" onclick="closePopover('featured-popover')" title="Close"> <svg class="slds-button__icon" aria-hidden="true"> <use href="#utility-close"></use> </svg> <span class="slds-assistive-text">Close</span> </button> </div> <div class="slds-popover__body" id="featured-popover-body"> <p>This is a featured popover with a header and close button. It demonstrates the basic structure and functionality.</p> </div> </div> </div> </div> <!-- About Popovers --> <h2>About Popovers</h2> <p>A popover is used to display contextual information to the user.</p> <p>A popover can accept the following nubbin position classes: <code>.slds-nubbin_left</code>, <code>.slds-nubbin_left-top</code>, <code>.slds-nubbin_left-bottom</code>, <code>.slds-nubbin_top-left</code>, <code>.slds-nubbin_top-right</code>, <code>.slds-nubbin_right-top</code>, <code>.slds-nubbin_right-bottom</code>, <code>.slds-nubbin_bottom-left</code>, <code>.slds-nubbin_bottom-right</code>.</p> <!-- Accessibility --> <h3>Accessibility</h3> <div class="accessibility-info"> <h4>Notable features</h4> <ul> <li>Popovers <strong>must</strong> come with a triggering button</li> <li>They <strong>must</strong> have at least one focusable element inside</li> <li>They <strong>should</strong> be implemented as a keyboard focus trap</li> <li>When triggered, user focus should be placed on the first focusable element that isn't the close button</li> <li>Pressing the Escape key as well as clicking the close button should close the Popover</li> <li>User focus should be placed back on the triggering button when the popover is closed</li> </ul> <h4>Notable attributes</h4> <ul> <li>The Popover element should have <code>role="dialog"</code> applied</li> <li>The <code>dialog</code> should be labelled using <code>aria-labelledby</code> or <code>aria-label</code></li> <li>The <code>dialog</code> should be described using <code>aria-describedby</code></li> <li>The triggering element <strong>must</strong> have <code>aria-haspopup="true"</code> when opened</li> </ul> </div> <!-- Base --> <h2>Base</h2> <div class="demo-section"> <h3>Basic Popover</h3> <div class="popover-container"> <button class="slds-button slds-button_neutral" onclick="togglePopover('base-popover')"> Basic Popover </button> <div id="base-popover" class="slds-popover slds-nubbin_bottom" role="dialog" aria-labelledby="base-popover-body"> <div class="slds-popover__body" id="base-popover-body"> <p>This is a basic popover without a header or footer.</p> </div> </div> </div> </div> <!-- With Header --> <div class="demo-section"> <h3>With Header</h3> <div class="popover-container"> <button class="slds-button slds-button_neutral" onclick="togglePopover('header-popover')"> Popover with Header </button> <div id="header-popover" class="slds-popover slds-nubbin_bottom" role="dialog" aria-labelledby="header-popover-heading" aria-describedby="header-popover-body"> <div class="slds-popover__header"> <h2 id="header-popover-heading" class="slds-popover__header-title">Popover Header</h2> <button class="slds-button slds-button_icon slds-button_icon-small slds-popover__close" onclick="closePopover('header-popover')" title="Close"> <svg class="slds-button__icon" aria-hidden="true"> <use href="#utility-close"></use> </svg> <span class="slds-assistive-text">Close</span> </button> </div> <div class="slds-popover__body" id="header-popover-body"> <p>This popover includes a header with a title and close button.</p> </div> </div> </div> </div> <!-- With Footer --> <div class="demo-section"> <h3>With Footer</h3> <div class="popover-container"> <button class="slds-button slds-button_neutral" onclick="togglePopover('footer-popover')"> Popover with Footer </button> <div id="footer-popover" class="slds-popover slds-nubbin_bottom" role="dialog" aria-labelledby="footer-popover-body"> <div class="slds-popover__body" id="footer-popover-body"> <p>This popover includes a footer with action buttons.</p> </div> <div class="slds-popover__footer"> <button class="slds-button slds-button_neutral" onclick="closePopover('footer-popover')">Cancel</button> <button class="slds-button slds-button_brand">Save</button> </div> </div> </div> </div> <!-- With Badge --> <div class="demo-section"> <h3>With Badge</h3> <div class="popover-container"> <button class="slds-button slds-button_neutral" onclick="togglePopover('badge-popover')"> Popover with Badge </button> <div id="badge-popover" class="slds-popover slds-nubbin_bottom" role="dialog" aria-labelledby="badge-popover-heading" aria-describedby="badge-popover-body"> <div class="slds-popover__header"> <h2 id="badge-popover-heading" class="slds-popover__header-title"> New Feature <span class="slds-badge slds-badge_brand slds-m-left_x-small">Beta</span> </h2> <button class="slds-button slds-button_icon slds-button_icon-small slds-popover__close" onclick="closePopover('badge-popover')" title="Close"> <svg class="slds-button__icon" aria-hidden="true"> <use href="#utility-close"></use> </svg> <span class="slds-assistive-text">Close</span> </button> </div> <div class="slds-popover__body" id="badge-popover-body"> <p>This popover includes a badge in the header to indicate status or category.</p> </div> </div> </div> </div> <!-- Widths --> <h2>Widths</h2> <div class="demo-grid"> <div class="demo-column"> <h3>Small</h3> <div class="popover-container"> <button class="slds-button slds-button_neutral" onclick="togglePopover('small-popover')"> Small Width </button> <div id="small-popover" class="slds-popover slds-popover_small slds-nubbin_bottom" role="dialog" aria-labelledby="small-popover-body"> <div class="slds-popover__body" id="small-popover-body"> <p>Small width popover (20rem/320px).</p> </div> </div> </div> </div> <div class="demo-column"> <h3>Medium</h3> <div class="popover-container"> <button class="slds-button slds-button_neutral" onclick="togglePopover('medium-popover')"> Medium Width </button> <div id="medium-popover" class="slds-popover slds-popover_medium slds-nubbin_bottom" role="dialog" aria-labelledby="medium-popover-body"> <div class="slds-popover__body" id="medium-popover-body"> <p>Medium width popover (25rem/400px).</p> </div> </div> </div> </div> <div class="demo-column"> <h3>Large</h3> <div class="popover-container"> <button class="slds-button slds-button_neutral" onclick="togglePopover('large-popover')"> Large Width </button> <div id="large-popover" class="slds-popover slds-popover_large </div> </div> </div> </div> </div> </div> <div class="hidden rotate-45 text-red-500 bg-red-100 dark:text-red-400 dark:bg-red-900/50 text-green-500 bg-green-100 dark:text-green-400 dark:bg-green-900/50 scheme-light scheme-dark scheme-light-dark"> </div> </main> </body> </html> <script> document.addEventListener("turbo:load", function() { var alerts = document.querySelectorAll('.alert') alerts.forEach(function(alert) { new bootstrap.Alert(alert) }) }) </script> <!--popover--> <script> document.addEventListener("DOMContentLoaded", function () { const dropdowns = document.querySelectorAll('[data-controller="dropdown-popover"]'); for (let i = 0; i < dropdowns.length; i++) { const dropdown = dropdowns[i]; const button = dropdown.querySelector('[data-dropdown-popover-target="button"]'); const menu = dropdown.querySelector('[data-dropdown-popover-target="menu"]'); if (!button || !menu) continue; let open = false; // Open menu button.addEventListener("mouseenter", () => { menu.style.opacity = "1"; menu.style.marginLeft = "-140px"; menu.style.pointerEvents = "auto"; menu.style.display = "block"; open = true; }); // Close after leaving both button and menu button.addEventListener("mouseleave", () => { setTimeout(() => { if (!menu.matches(':hover')) { menu.style.opacity = "0"; menu.style.pointerEvents = "none"; menu.style.display = "none"; open = false; } }, 100); }); // Keep open while hovering over menu menu.addEventListener("mouseenter", () => { menu.style.opacity = "1"; menu.style.marginLeft = "-140px"; menu.style.pointerEvents = "auto"; menu.style.display = "block"; }); menu.addEventListener("mouseleave", () => { menu.style.opacity = "0"; menu.style.pointerEvents = "none"; menu.style.display = "none"; open = false; }); } }); </script> <!--sendJF--> <script> document.querySelectorAll('#sendFiddle').forEach((btn, index) => { btn.addEventListener('click', () => { const iframe = document.querySelectorAll('iframe')[index]; const srcdoc = iframe?.getAttribute('srcdoc'); if (!srcdoc) { alert('iframe srcdoc not available'); return; } // Extract <style> and <script> content from srcdoc using regex const cssMatches = [...srcdoc.matchAll(/<style[^>]*>([\s\S]*?)<\/style>/gi)]; const jsMatches = [...srcdoc.matchAll(/<script[^>]*>([\s\S]*?)<\/script>/gi)]; const css = cssMatches.map(m => m[1]).join('\n'); const js = jsMatches.map(m => m[1]).join('\n'); // Remove <style> and <script> blocks to isolate HTML const html = srcdoc .replace(/<style[^>]*>[\s\S]*?<\/style>/gi, '') .replace(/<script[^>]*>[\s\S]*?<\/script>/gi, '') .replace(/</g, '<') .replace(/>/g, '>') .replace(/&/g, '&'); // Create and submit form to JSFiddle const form = document.createElement('form'); form.method = 'POST'; form.action = 'https://jsfiddle.net/api/post/library/pure/'; form.target = '_blank'; const addField = (name, value) => { const input = document.createElement('input'); input.type = 'hidden'; input.name = name; input.value = value; form.appendChild(input); }; addField('html', html.trim()); addField('css', css.trim()); addField('js', js.trim()); addField('title', 'From Layr iframe srcdoc'); document.body.appendChild(form); form.submit(); document.body.removeChild(form); }); }); </script> <!--fullscreen--> <script> document.querySelectorAll('#FullscreenTab').forEach((button) => { button.addEventListener('click', function () { // Prevent duplicate fullscreen overlays if (document.getElementById('fullscreen-iframe-wrapper')) return; // Find the closest snippet container and its iframe const snippetContainer = this.closest('[data-controller="snippet"]'); const iframe = snippetContainer?.querySelector('iframe'); if (!iframe) { console.error('No iframe found for this FullscreenTab.'); return; } // Create a cloned iframe using srcdoc or fallback to content HTML const iframeClone = document.createElement('iframe'); iframeClone.className = 'w-full h-full border-0 rounded-xl bg-white dark:bg-neutral-900'; iframeClone.setAttribute('sandbox', 'allow-same-origin allow-scripts allow-forms'); iframeClone.srcdoc = iframe.srcdoc || iframe.contentDocument?.documentElement?.outerHTML; // Create overlay const overlay = document.createElement('div'); overlay.id = 'fullscreen-iframe-wrapper'; overlay.className = 'fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm p-4'; // Create container for iframe and close button const container = document.createElement('div'); container.className = ' iframe_main_show relative w-full max-w-6xl h-[90vh] bg-white dark:bg-neutral-900 rounded-xl overflow-hidden shadow-2xl'; // Close button const closeBtn = document.createElement('button'); closeBtn.innerHTML = '×'; closeBtn.className = ` absolute top-3 right-3 text-white text-2xl font-bold bg-black/40 hover:bg-black/70 rounded-full w-10 h-10 flex items-center justify-center transition `; closeBtn.addEventListener('click', () => overlay.remove()); // Assemble container.appendChild(closeBtn); container.appendChild(iframeClone); overlay.appendChild(container); document.body.appendChild(overlay); }); }); </script> </body> </html>