Web Component Usage
Bolt Popover is a web component, you can simply use <bolt-popover> in the markup to make it render.
This triggers a popover
Content
This is the content of the popover with a call to action.
<bolt-popover>
<bolt-button size="small">
This triggers a popover
</bolt-button>
<div slot="content">
<bolt-text headline font-size="small">Content</bolt-text>
<bolt-text font-size="xsmall">This is the content of the popover with a <bolt-link url="https://pega.com">call to action</bolt-link>.</bolt-text>
</div>
</bolt-popover>
Prop Usage
Configure the popover with the properties specified in the schema.
Popover Menu
Menu Item 1
Menu Item 2
Menu Item 3
<bolt-popover spacing="none" placement="top-start">
<bolt-button size="small">
Popover Menu
</bolt-button>
<div slot="content">
<bolt-menu>
<bolt-menu-item>
Menu Item 1
</bolt-menu-item>
<bolt-menu-item>
Menu Item 2
</bolt-menu-item>
<bolt-menu-item>
Menu Item 3
</bolt-menu-item>
</bolt-menu>
</div>
</bolt-popover>
Debug Panel