Popovers

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

Show design guidelines

Code

Framework HTML React Angular

Props

Default

Sed posuere consectetur est at lob ortis. Aenean eu leo quam.Default

Toggle dark mode

<certara-popover>
  <span slot="popover-content">Sed posuere consectetur est at lob ortis. 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 lob ortis. 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 lob ortis. Aenean eu leo quam.</span>
  <certara-button>Default</certara-button>
</certara-popover>

Opened

Sed posuere consectetur est at lob ortis. Aenean eu leo quam.Opened

Toggle dark mode

<certara-popover opened="true">
  <span slot="popover-content">Sed posuere consectetur est at lob ortis. 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 lob ortis. 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 lob ortis. Aenean eu leo quam.</span>
  <certara-button>Opened</certara-button>
</certara-popover>

Popover header

Sed posuere consectetur est at lob ortis. 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 lob ortis. Aenean eu leo quam.</span>
  <certara-button>With header</certara-button>
</certara-popover>

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

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

Size

Small

Sed posuere consectetur est at lob ortis. Aenean eu leo quam.Small

Toggle dark mode

<certara-popover opened="true" size="sm">
  <span slot="popover-content">Sed posuere consectetur est at lob ortis. Aenean eu leo quam.</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">Sed posuere consectetur est at lob ortis. Aenean eu leo quam.</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">Sed posuere consectetur est at lob ortis. Aenean eu leo quam.</span>
  <certara-button>Small</certara-button>
</certara-popover>

Large

Sed posuere consectetur est at lob ortis. Aenean eu leo quam.Large

Toggle dark mode

<certara-popover opened="true" size="lg">
  <span slot="popover-content">Sed posuere consectetur est at lob ortis. Aenean eu leo quam.</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">Sed posuere consectetur est at lob ortis. Aenean eu leo quam.</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">Sed posuere consectetur est at lob ortis. Aenean eu leo quam.</span>
  <certara-button>Large</certara-button>
</certara-popover>

Default

Sed posuere consectetur est at lob ortis. Aenean eu leo quam.Default

Toggle dark mode

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

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

<CertaraPopover opened={true}>
  <span slot="popover-content">Sed posuere consectetur est at lob ortis. 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 opened="true">
  <span slot="popover-content">Sed posuere consectetur est at lob ortis. Aenean eu leo quam.</span>
  <certara-button>Default</certara-button>
</certara-popover>

Placement

Top

Sed posuere consectetur est at lob ortis. Aenean eu leo quam.Popover top

Toggle dark mode

<certara-popover opened="true" placement="top">
  <span slot="popover-content">Sed posuere consectetur est at lob ortis. Aenean eu leo quam.</span>
  <certara-button>Popover top</certara-button>
</certara-popover>

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

<CertaraPopover opened={true} placement="top">
  <span slot="popover-content">Sed posuere consectetur est at lob ortis. Aenean eu leo quam.</span>
  <CertaraButton>Popover 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">Sed posuere consectetur est at lob ortis. Aenean eu leo quam.</span>
  <certara-button>Popover top</certara-button>
</certara-popover>

Top start

Sed posuere consectetur est at lob ortis. Aenean eu leo quam.Popover top-start

Toggle dark mode

<certara-popover opened="true" placement="top-start">
  <span slot="popover-content">Sed posuere consectetur est at lob ortis. Aenean eu leo quam.</span>
  <certara-button>Popover top-start</certara-button>
</certara-popover>

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

<CertaraPopover opened={true} placement="top-start">
  <span slot="popover-content">Sed posuere consectetur est at lob ortis. Aenean eu leo quam.</span>
  <CertaraButton>Popover top-start</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-start">
  <span slot="popover-content">Sed posuere consectetur est at lob ortis. Aenean eu leo quam.</span>
  <certara-button>Popover top-start</certara-button>
</certara-popover>

Bottom

Sed posuere consectetur est at lob ortis. Aenean eu leo quam.Popover bottom

Toggle dark mode

<certara-popover opened="true" placement="bottom">
  <span slot="popover-content">Sed posuere consectetur est at lob ortis. Aenean eu leo quam.</span>
  <certara-button>Popover bottom</certara-button>
</certara-popover>

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

<CertaraPopover opened={true} placement="bottom">
  <span slot="popover-content">Sed posuere consectetur est at lob ortis. Aenean eu leo quam.</span>
  <CertaraButton>Popover 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">Sed posuere consectetur est at lob ortis. Aenean eu leo quam.</span>
  <certara-button>Popover bottom</certara-button>
</certara-popover>

Bottom start

Sed posuere consectetur est at lob ortis. Aenean eu leo quam.Popover bottom-start

Toggle dark mode

<certara-popover opened="true" placement="bottom-start">
  <span slot="popover-content">Sed posuere consectetur est at lob ortis. Aenean eu leo quam.</span>
  <certara-button>Popover bottom-start</certara-button>
</certara-popover>

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

<CertaraPopover opened={true} placement="bottom-start">
  <span slot="popover-content">Sed posuere consectetur est at lob ortis. Aenean eu leo quam.</span>
  <CertaraButton>Popover bottom-start</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-start">
  <span slot="popover-content">Sed posuere consectetur est at lob ortis. Aenean eu leo quam.</span>
  <certara-button>Popover bottom-start</certara-button>
</certara-popover>

Right

Sed posuere consectetur est at lob ortis. Aenean eu leo quam.Popover right

Toggle dark mode

<certara-popover opened="true" placement="right">
  <span slot="popover-content">Sed posuere consectetur est at lob ortis. Aenean eu leo quam.</span>
  <certara-button>Popover right</certara-button>
</certara-popover>

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

<CertaraPopover opened={true} placement="right">
  <span slot="popover-content">Sed posuere consectetur est at lob ortis. Aenean eu leo quam.</span>
  <CertaraButton>Popover 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">Sed posuere consectetur est at lob ortis. Aenean eu leo quam.</span>
  <certara-button>Popover right</certara-button>
</certara-popover>

Right start

Sed posuere consectetur est at lob ortis. Aenean eu leo quam.Popover right-start

Toggle dark mode

<certara-popover opened="true" placement="right-start">
  <span slot="popover-content">Sed posuere consectetur est at lob ortis. Aenean eu leo quam.</span>
  <certara-button>Popover right-start</certara-button>
</certara-popover>

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

<CertaraPopover opened={true} placement="right-start">
  <span slot="popover-content">Sed posuere consectetur est at lob ortis. Aenean eu leo quam.</span>
  <CertaraButton>Popover right-start</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-start">
  <span slot="popover-content">Sed posuere consectetur est at lob ortis. Aenean eu leo quam.</span>
  <certara-button>Popover right-start</certara-button>
</certara-popover>

Left

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

Toggle dark mode

<certara-popover opened="true" placement="left">
  <span slot="popover-content">Sed posuere consectetur est at lob ortis. Aenean eu leo quam.</span>
  <certara-button>Popover left</certara-button>
</certara-popover>

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

<CertaraPopover opened={true} placement="left">
  <span slot="popover-content">Sed posuere consectetur est at lob ortis. Aenean eu leo quam.</span>
  <CertaraButton>Popover 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">Sed posuere consectetur est at lob ortis. Aenean eu leo quam.</span>
  <certara-button>Popover left</certara-button>
</certara-popover>

Left start

Sed posuere consectetur est at lob ortis. Aenean eu leo quam.Popover left-start

Toggle dark mode

<certara-popover opened="true" placement="left-start">
  <span slot="popover-content">Sed posuere consectetur est at lob ortis. Aenean eu leo quam.</span>
  <certara-button>Popover left-start</certara-button>
</certara-popover>

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

<CertaraPopover opened={true} placement="left-start">
  <span slot="popover-content">Sed posuere consectetur est at lob ortis. Aenean eu leo quam.</span>
  <CertaraButton>Popover left-start</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-start">
  <span slot="popover-content">Sed posuere consectetur est at lob ortis. Aenean eu leo quam.</span>
  <certara-button>Popover left-start</certara-button>
</certara-popover>

certara-popover

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.