Popovers
Popovers are used to display additional content or actions related to a specific element on the page. They can be triggered by clicking or hovering over an element, and they can contain any type of content, including text, images, and interactive elements.
Popovers are built with the corn-popover web component and can be positioned in any of the following directions: top, right, bottom, and left. The popover will automatically adjust its position to stay within the viewport if there is not enough space in the specified direction.
The Popover component uses the position attribute to determine where to display the popover content in relation to the anchor element. The anchor element is the element that triggers the popover when interacted with. The popover content is defined within the corn-popover element and can include any HTML content, such as text, images, or interactive elements like links and buttons.
Popovers are designed to be accessible and include appropriate ARIA attributes to ensure that they can be used by all users, including those using assistive technologies. The popover will automatically manage focus and keyboard interactions to provide a seamless user experience. You should make sure that you have the appropriate ARIA attributes on the trigger element (e.g., aria-controls) to associate it with the popover id for better accessibility.
The corn-popover--anchor class is used to wrap the trigger element and the popover content, ensuring that they are properly associated and that the popover is positioned correctly in relation to the trigger element.
<div class="corn-popover--anchor">
<button class="corn-button corn-pop" aria-controls="popover-default">
Default (Top)
</button>
<corn-popover position="top" id="popover-default" class="corn-popover">
<ul>
<li>
<a href="#">Item 1</a>
</li>
<li>
<a href="#">Item 2</a>
</li>
<li>
<a href="#">Item 3</a>
</li>
</ul>
</corn-popover>
</div>Position Modifiers
The default position for the popover is top, but it can be positioned in any of the following directions:
toprightbottomleft
Popover Top (Default)
<div class="corn-popover--anchor">
<button class="corn-button corn-pop" aria-controls="popover-top">
Top
</button>
<corn-popover position="top" id="popover-top" class="corn-popover">
<ul>
<li>
<a href="#" class="corn-link">
Item 1
</a>
</li>
<li>
<a href="#" class="corn-link">
Item 2
</a>
</li>
<li>
<a href="#" class="corn-link">
Item 3
</a>
</li>
</ul>
</corn-popover>
</div>Popover Right
<div class="corn-popover--anchor">
<button class="corn-button corn-pop" aria-controls="popover-right">
Right
</button>
<corn-popover position="right" id="popover-right" class="corn-popover">
<ul>
<li>
<a href="#">Item 1</a>
</li>
<li>
<a href="#">Item 2</a>
</li>
<li>
<a href="#">Item 3</a>
</li>
</ul>
</corn-popover>
</div>Popover Bottom
<div class="corn-popover--anchor">
<button class="corn-button corn-pop" aria-controls="popover-bottom">
Bottom
</button>
<corn-popover position="bottom" id="popover-bottom" class="corn-popover">
<ul>
<li>
<a href="#">Item 1</a>
</li>
<li>
<a href="#">Item 2</a>
</li>
<li>
<a href="#">Item 3</a>
</li>
</ul>
</corn-popover>
</div>Popover Left
<div class="corn-popover--anchor">
<button class="corn-button corn-pop" aria-controls="popover-left">
Left
</button>
<corn-popover position="left" id="popover-left" class="corn-popover">
<ul>
<li>
<a href="#">Item 1</a>
</li>
<li>
<a href="#">Item 2</a>
</li>
<li>
<a href="#">Item 3</a>
</li>
</ul>
</corn-popover>
</div>Popover Tokens
:root {
--cc-popover--background: var(--cc-white);
--cc-popover--border: var(--cc-border--width) var(--cc-border--style) var(--cc-border--color);
--cc-popover--border-radius: var(--cc-border--radius);
--cc-popover--box-shadow: var(--cc-shadow--drop);
--cc-popover--color: var(--cc-ink);
--cc-popover--font-size: var(--cc-size-0);
--cc-popover--gap: 0.5rem;
--cc-popover--padding: 0.75rem;
--cc-popover--transition: opacity var(--cc-transition--easing) var(--cc-transition--time);
}