Popover

Show 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>

Opened

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

Toggle dark mode

<certara-popover opened="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 opened={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 opened="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 header

Toggle dark mode

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

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

<CertaraPopover opened={true} popoverHeader="Custom header">
  <span slot="popover-content">Sed posuere consectetur est at lobortis. Aenean eu leo quam.</span>
  <CertaraButton>With header</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 opened="true" popover-header="Custom header">
  <span slot="popover-content">Sed posuere consectetur est at lobortis. Aenean eu leo quam.</span>
  <certara-button>With header</certara-button>
</certara-popover>

Size

Framework HTML React Angular

Small

Small popover content.Small

Toggle dark mode

<certara-popover opened="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 opened={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 opened="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 opened="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 opened={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 opened="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 opened="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 opened={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 opened="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 opened="true" 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 opened={true} 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 opened="true" 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 opened="true" 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 opened={true} 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 opened="true" 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 opened="true" 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 opened={true} 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 opened="true" 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 opened="true" 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 opened={true} 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 opened="true" placement="right">
  <span slot="popover-content">Popover on right</span>
  <certara-button>Right</certara-button>
</certara-popover>

certara-popover

certara-tooltip uses the Floating UI positioning library (successor to Popper) as a dependency

Properties

opened

Attribute	opened
Type	boolean
Default	false
Required	false
Description	Forces the popover to open or close

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

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

Events

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

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.