Popover

A floating component that displays additional information when an element is clicked or hovered.

Basic Usage

The most basic popover, which appears on hover.

 Title 
 This is popover content. 
<prism-button [prismPopoverTrigger]="popover" placement="top" variant="primary">Hover Me</prism-button>
<prism-popover #popover="prismPopover" title="Title" content="This is popover content."></prism-popover>

Click Trigger

Click the button to toggle the popover. Clicking anywhere outside closes it.

 Title 
 This popover opens on click. 
<prism-button [prismPopoverTrigger]="popover2" trigger="click" placement="bottom" variant="secondary">Click Me</prism-button>
<prism-popover #popover2="prismPopover" title="Title" content="This popover opens on click."></prism-popover>

Focus Trigger

Use focus to show the popover on input fields.

 Focus triggers this popover 
<prism-input>
   <input prismInput placeholder="Focus me" [prismPopoverTrigger]="popover3" trigger="focus" placement="right" />
</prism-input>
<prism-popover #popover3="prismPopover" content="Focus triggers this popover"></prism-popover>

Content Only

A popover without a title.

 This is popover content without a title. 
<prism-button [prismPopoverTrigger]="contentOnlyPopover" placement="top" variant="primary">Hover Me</prism-button>
<prism-popover #contentOnlyPopover="prismPopover" content="This is popover content without a title."></prism-popover>

Placement

There are 12 placement options available.

 Title 
 Content 
 Title 
 Content 
 Title 
 Content 
 Title 
 Content 
 Title 
 Content 
 Title 
 Content 
 Title 
 Content 
 Title 
 Content 
 Title 
 Content 
 Title 
 Content 
 Title 
 Content 
 Title 
 Content 
<!-- 12 Placments Example -->
<div style="margin-left: 70px; display: flex; gap: 8px;">
  <prism-button [prismPopoverTrigger]="topLeft" placement="topLeft">TL</prism-button>
  <prism-popover #topLeft="prismPopover" title="Title" content="Content"></prism-popover>
  <prism-button [prismPopoverTrigger]="top" placement="top">Top</prism-button>
  <prism-popover #top="prismPopover" title="Title" content="Content"></prism-popover>
  <prism-button [prismPopoverTrigger]="topRight" placement="topRight">TR</prism-button>
  <prism-popover #topRight="prismPopover" title="Title" content="Content"></prism-popover>
</div>
<!-- ... Left and Right Placements ... -->
<!-- ... Bottom Placements ... -->

Complex Content

You can use templates for title and content to render complex forms inside a popover.

<prism-button [prismPopoverTrigger]="popover4" trigger="click" placement="bottomRight" variant="primary">Complex Content</prism-button>
<prism-popover #popover4="prismPopover" [title]="titleTemplate" [content]="contentTemplate"></prism-popover>

<ng-template #titleTemplate>
  <div style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
    <span>Quick Settings</span>
    <a href="javascript:void(0)" (click)="popover4.hide()">Close</a>
  </div>
</ng-template>

<ng-template #contentTemplate>
  <div>
    <p>Adjust your settings below.</p>
    <prism-input>
       <input prismInput placeholder="Email" />
    </prism-input>
    <div style="margin-top: 12px; display: flex; justify-content: flex-end;">
       <prism-button variant="primary" size="sm" (click)="popover4.hide()">Save</prism-button>
    </div>
  </div>
</ng-template>

API Overview

PrismPopoverTriggerDirective

Name	Type	Default	Description
`[prismPopoverTrigger]`	`PrismPopoverComponent`	`-`	The popover instance to control
`trigger`	`'click' \| 'hover' \| 'focus'`	`'hover'`	Trigger mode
`placement`	`PrismPopoverPlacement`	`'top'`	Position of the popover (12 options)

PrismPopoverComponent

Name	Type	Default	Description
`title`	`string \| TemplateRef<unknown>`	`-`	Title of the popover
`content`	`string \| TemplateRef<unknown>`	`-`	Content of the popover
`visible`	`Signal<boolean>`	`false`	Readonly current visibility state
`show`	`() => void`	`-`	Programmatically open popover
`hide`	`() => void`	`-`	Programmatically close popover