Popovers
Popover
A popover can be used in different contexts to reveal additional information (e.g. navigation). The popover can contain any content.
| Custom Property | Default Value | Description |
|---|---|---|
--width |
220px | The width of the popover |
--height |
266px | The height of the popover |
--position |
absolute | The position of the popover relative to its container |
Set --width to fit-content to automatically adjust the width of the popover based on the content. Set --height to auto to have the container be the height of the content.
Example
A popover with its position set to static.
Get the most out of hospital price transparency.
HTML
<div class="pv-popover pv-inset-square" style="--position: static">
<p class="pv-text-body-xs">Get the most out of hospital price transparency.</p>
</div>Alignment
You can use the data-align attribute to change the default position (below the trigger and aligned to the left) to top, right or both.
| Value | Description |
|---|---|
| [no attribute] | Places the popover below the trigger and aligned on the left |
top |
Places the popover above the trigger |
right |
Aligns the popover with the right side of the trigger |
Popover List
Use a popover list inside of a popover to separate each item with a line. Be sure to include the role="list" attribute to remove standard list formatting.
Example
A popover with a popover list.
HTML
<div class="pv-popover" style="--position: static">
<ul role="list" class="pv-popover-list">
<li><a href="#">Product Roadmap</a></li>
<li><a href="#">Database Log</a></li>
<li><a href="#">Support</a></li>
</ul>
</div>Popover Menu
Use the popover menu to display a popover when an element is hovered over or focused within. You can change the alignment of the popover with data-align.
| Attribute | Value | Description |
|---|---|---|
| none | n/a | Aligns the menu with the left side of the container |
data-align |
right | Aligns the menu with the right side of the container |
Example
Popover menus with left and right alignment.
HTML
<div class="pv-space-between">
<nav class="pv-popover-menu">
<button type="button" class="pv-button-icon">
<svg aria-hidden="true" class="pv-icon-24">
<title>user-circle</title>
<use xlink:href="#user-circle"></use>
</svg>
</button>
<div class="pv-popover" style="--height: auto">
<div class="pv-border-bottom pv-inset-square-16 pv-stack">
<p class="pv-text-title-sm">Mike Aparicio</p>
<p class="pv-text-subdued pv-text-body-xs pv-truncate">mike.aparicio@turquoise.health</p>
</div>
<p class="pv-text-eyebrow-sm pv-text-subdued pv-inset-inline-16">Account</p>
<ul role="list" class="pv-popover-list pv-border-bottom">
<li><a href="#">
<svg aria-hidden="true" class="pv-icon-16">
<title>user</title>
<use xlink:href="#user"></use>
</svg>
<span>View Profile</span>
</a></li>
<li><a href="#">
<svg aria-hidden="true" class="pv-icon-16">
<title>settings</title>
<use xlink:href="#settings"></use>
</svg>
<span>Settings</span>
</a></li>
</ul>
<ul role="list" class="pv-popover-list pv-border-bottom">
<li><a href="#">FAQ</a></li>
<li><a href="#">Support</a></li>
</ul>
<ul role="list" class="pv-popover-list">
<li><a href="#">
<span class="pv-flex-item">Sign Out</span>
<svg aria-hidden="true" class="pv-icon-16">
<title>arrow-forward</title>
<use xlink:href="#arrow-forward"></use>
</svg>
</a></li>
</ul>
</div>
</nav>
<nav class="pv-popover-menu">
<button type="button" class="pv-button-icon">
<svg aria-hidden="true" class="pv-icon-24">
<title>user-circle</title>
<use xlink:href="#user-circle"></use>
</svg>
</button>
<div class="pv-popover" style="--height: 340px" data-align="right">
<div class="pv-border-bottom pv-inset-square-16 pv-stack">
<p class="pv-text-title-sm">Mike Aparicio</p>
<p class="pv-text-subdued pv-text-body-xs pv-truncate">mike.aparicio@turquoise.health</p>
</div>
<p class="pv-text-eyebrow-sm pv-text-subdued pv-inset-inline-16">Account</p>
<ul role="list" class="pv-popover-list pv-border-bottom">
<li><a href="#">
<svg aria-hidden="true" class="pv-icon-16">
<title>user</title>
<use xlink:href="#user"></use>
</svg>
<span>View Profile</span>
</a></li>
<li><a href="#">
<svg aria-hidden="true" class="pv-icon-16">
<title>settings</title>
<use xlink:href="#settings"></use>
</svg>
<span>Settings</span>
</a></li>
</ul>
<ul role="list" class="pv-popover-list pv-border-bottom">
<li><a href="#">FAQ</a></li>
<li><a href="#">Support</a></li>
</ul>
<ul role="list" class="pv-popover-list">
<li><a href="#">
<span class="pv-flex-item">Sign Out</span>
<svg aria-hidden="true" class="pv-icon-16">
<title>arrow-forward</title>
<use xlink:href="#arrow-forward"></use>
</svg>
</a></li>
</ul>
</div>
</nav>
</div>Popover Auto Close
Use auto-close element to have popover content display and hide when the trigger element is clicked.
This component requires the following JS assets to function properly. Read the documentation for information on how to import the assets for your application.
pit-viper.js
Add the pv-auto-close-content class to the content that you want to display and hide. Also make sure to add pv-relative to the parent element.
Example
A popover with auto close.
Get the most out of hospital price transparency.
HTML
<pv-auto-close>
<button type="button" class="pv-button-link">Click here for more info.</button>
<div class="pv-auto-close-content pv-popover pv-inset-square">
<p class="pv-text-body-xs">Get the most out of hospital price transparency.</p>
</div>
</pv-auto-close>
<!-- import pit-viper.js as described in the PV usage instructions -->