Popover

Design guidelines

Code

Framework

HTML

React

Angular

Default

Sed posuere consectetur est at lobortis. Aenean eu leo quam.Default

Toggle dark mode

<certara-popover>
  <span slot="popover-content">Sed posuere consectetur est at lobortis. Aenean eu leo quam.</span>
  <certara-button>Default</certara-button>
</certara-popover>

import { CertaraButton, CertaraPopover } from '@certara/certara-ui-react';

<CertaraPopover>
  <span slot="popover-content">Sed posuere consectetur est at lobortis. Aenean eu leo quam.</span>
  <CertaraButton>Default</CertaraButton>
</CertaraPopover>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-popover>
  <span slot="popover-content">Sed posuere consectetur est at lobortis. Aenean eu leo quam.</span>
  <certara-button>Default</certara-button>
</certara-popover>

Open

Sed posuere consectetur est at lobortis. Aenean eu leo quam.Opened

Toggle dark mode

<certara-popover open="true">
  <span slot="popover-content">Sed posuere consectetur est at lobortis. Aenean eu leo quam.</span>
  <certara-button>Opened</certara-button>
</certara-popover>

import { CertaraButton, CertaraPopover } from '@certara/certara-ui-react';

<CertaraPopover open={true}>
  <span slot="popover-content">Sed posuere consectetur est at lobortis. Aenean eu leo quam.</span>
  <CertaraButton>Opened</CertaraButton>
</CertaraPopover>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-popover open="true">
  <span slot="popover-content">Sed posuere consectetur est at lobortis. Aenean eu leo quam.</span>
  <certara-button>Opened</certara-button>
</certara-popover>

With header

Sed posuere consectetur est at lobortis. Aenean eu leo quam.With headline

Toggle dark mode

<certara-popover open="true" headline="Custom header">
  <span slot="popover-content">Sed posuere consectetur est at lobortis. Aenean eu leo quam.</span>
  <certara-button>With headline</certara-button>
</certara-popover>

import { CertaraButton, CertaraPopover } from '@certara/certara-ui-react';

<CertaraPopover open={true} headline="Custom header">
  <span slot="popover-content">Sed posuere consectetur est at lobortis. Aenean eu leo quam.</span>
  <CertaraButton>With headline</CertaraButton>
</CertaraPopover>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-popover open="true" headline="Custom header">
  <span slot="popover-content">Sed posuere consectetur est at lobortis. Aenean eu leo quam.</span>
  <certara-button>With headline</certara-button>
</certara-popover>

Size

Framework

HTML

React

Angular

Small

Small popover content.Small

Toggle dark mode

<certara-popover open="true" size="sm">
  <span slot="popover-content">Small popover content.</span>
  <certara-button>Small</certara-button>
</certara-popover>

import { CertaraButton, CertaraPopover } from '@certara/certara-ui-react';

<CertaraPopover open={true} size="sm">
  <span slot="popover-content">Small popover content.</span>
  <CertaraButton>Small</CertaraButton>
</CertaraPopover>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-popover open="true" size="sm">
  <span slot="popover-content">Small popover content.</span>
  <certara-button>Small</certara-button>
</certara-popover>

Default

Default popover content.Default

Toggle dark mode

<certara-popover open="true">
  <span slot="popover-content">Default popover content.</span>
  <certara-button>Default</certara-button>
</certara-popover>

import { CertaraButton, CertaraPopover } from '@certara/certara-ui-react';

<CertaraPopover open={true}>
  <span slot="popover-content">Default popover content.</span>
  <CertaraButton>Default</CertaraButton>
</CertaraPopover>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-popover open="true">
  <span slot="popover-content">Default popover content.</span>
  <certara-button>Default</certara-button>
</certara-popover>

Large

Large popover content.Large

Toggle dark mode

<certara-popover open="true" size="lg">
  <span slot="popover-content">Large popover content.</span>
  <certara-button>Large</certara-button>
</certara-popover>

import { CertaraButton, CertaraPopover } from '@certara/certara-ui-react';

<CertaraPopover open={true} size="lg">
  <span slot="popover-content">Large popover content.</span>
  <CertaraButton>Large</CertaraButton>
</CertaraPopover>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-popover open="true" size="lg">
  <span slot="popover-content">Large popover content.</span>
  <certara-button>Large</certara-button>
</certara-popover>

Placement

Framework

HTML

React

Angular

Top

Popover on topTop

Toggle dark mode

<certara-popover open="true" size="sm" placement="top">
  <span slot="popover-content">Popover on top</span>
  <certara-button>Top</certara-button>
</certara-popover>

import { CertaraButton, CertaraPopover } from '@certara/certara-ui-react';

<CertaraPopover open={true} size="sm" placement="top">
  <span slot="popover-content">Popover on top</span>
  <CertaraButton>Top</CertaraButton>
</CertaraPopover>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-popover open="true" size="sm" placement="top">
  <span slot="popover-content">Popover on top</span>
  <certara-button>Top</certara-button>
</certara-popover>

Bottom

Popover on bottomBottom

Toggle dark mode

<certara-popover open="true" size="sm" placement="bottom">
  <span slot="popover-content">Popover on bottom</span>
  <certara-button>Bottom</certara-button>
</certara-popover>

import { CertaraButton, CertaraPopover } from '@certara/certara-ui-react';

<CertaraPopover open={true} size="sm" placement="bottom">
  <span slot="popover-content">Popover on bottom</span>
  <CertaraButton>Bottom</CertaraButton>
</CertaraPopover>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-popover open="true" size="sm" placement="bottom">
  <span slot="popover-content">Popover on bottom</span>
  <certara-button>Bottom</certara-button>
</certara-popover>

Left

Popover on leftLeft

Toggle dark mode

<certara-popover open="true" size="sm" placement="left">
  <span slot="popover-content">Popover on left</span>
  <certara-button>Left</certara-button>
</certara-popover>

import { CertaraButton, CertaraPopover } from '@certara/certara-ui-react';

<CertaraPopover open={true} size="sm" placement="left">
  <span slot="popover-content">Popover on left</span>
  <CertaraButton>Left</CertaraButton>
</CertaraPopover>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-popover open="true" size="sm" placement="left">
  <span slot="popover-content">Popover on left</span>
  <certara-button>Left</certara-button>
</certara-popover>

Right

Popover on rightRight

Toggle dark mode

<certara-popover open="true" size="sm" placement="right">
  <span slot="popover-content">Popover on right</span>
  <certara-button>Right</certara-button>
</certara-popover>

import { CertaraButton, CertaraPopover } from '@certara/certara-ui-react';

<CertaraPopover open={true} size="sm" placement="right">
  <span slot="popover-content">Popover on right</span>
  <CertaraButton>Right</CertaraButton>
</CertaraPopover>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-popover open="true" size="sm" placement="right">
  <span slot="popover-content">Popover on right</span>
  <certara-button>Right</certara-button>
</certara-popover>

certara-popover

Floating panel anchored to a trigger element for menus, rich content, or contextual actions.

Properties

hasPadding

Attribute	has-padding
Type	boolean
Default	undefined
Required	false
Description	Whether to add padding to the popover DEPRECATED. Use spaceInside instead. Will be removed in the next major version.

headline

Attribute	headline
Type	string
Default	undefined
Required	false
Description	Creates a header section for the popover

open

Attribute	open
Type	boolean
Default	undefined
Required	false
Description	Forces the popover to open or close. Closed when unset.

opened

Attribute	opened
Type	boolean
Default	undefined
Required	false
Description	Forces the popover to open or close DEPRECATED. Use open instead. Will be removed in the next major version.

placement

Attribute	placement
Type	"bottom" | "bottom-start" | "left" | "left-start" | "right" | "right-start" | "top" | "top-start"
Default	undefined
Required	false
Description	These options will suggest a starting point for the popover position, but <certara-popover> will automatically position itself within the viewport to avoid appearing offscreen

popoverHeader

Attribute	popover-header
Type	string
Default	undefined
Required	false
Description	Creates a header section for the popover DEPRECATED. Use headline instead. Will be removed in the next major version.

position

Attribute	position
Type	"absolute" | "fixed"
Default	'absolute'
Required	false
Description	Use ‘fixed’ to break a popover out of a positioned container

size

Attribute	size
Type	"lg" | "sm"
Default	undefined
Required	false
Description	Sets a width on the popover

spaceInside

Attribute	space-inside
Type	"md" | "none"
Default	undefined
Required	false
Description	Whether to add padding to the popover. none removes it. Defaults to md.

Events

Name	Description	Bubbles
certaraClose	Event emitted when popover is closed	false
certaraOpen	Event emitted when popover is opened	false

Methods

Name	Signature	Description
hide	() => Promise<void>	Public method to hide the popover
show	() => Promise<void>	Public method to show the popover

Slots

Name	Description
	Content in the default slot is the opener for the popover.
popover-content	Content for the popover.

A popover is a small overlay that displays supplemental information to the user. It can contain rich content and is triggered when the UI element it relates to is selected.

Design guidelines

Popovers

Select a button to view the popover.

Sed posuere consectetur est at lob ortis. Aenean eu leo quam.Popover rightSed posuere consectetur est at lob ortis. Aenean eu leo quam.Popover topSed posuere consectetur est at lob ortis. Aenean eu leo quam.Popover bottomSed posuere consectetur est at lob ortis. Aenean eu leo quam.Popover left

Toggle dark mode

Best practices

Use popovers for non-essential information that provides the user with additional guidance or actions.

• Can contain a header, formatted text, links, etc.
• Displaying a popover requires a user action (click, tap, or select via key command).
• Dismissing a popover also requires a user action.
• Be mindful of placement - a popover should not obscure critical elements on the page.

Accessibility

• Popovers should be operable using the keyboard alone.
• Popovers should be announced by screen readers.
• When a popover is opened, focus should be moved to the popover so that keyboard users can interact with it.
• When the popover is closed, focus should be returned to the element that triggered it.

For more information, see our accessibility guidelines.

Design resources

View component in Figma