Popover

Code

HTML

React

Angular

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

Default

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>

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

Opened

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>

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

With header

<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

HTML

React

Angular

Small popover content.

Small

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 popover content.

Default

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 popover content.

Large

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

HTML

React

Angular

Popover on top

Top

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

<CertaraPopover opened={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 opened="true" size="sm" placement="top">
  <span slot="popover-content">Popover on top</span>
  <certara-button>Top</certara-button>
</certara-popover>

Popover on bottom

Bottom

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

<CertaraPopover opened={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 opened="true" size="sm" placement="bottom">
  <span slot="popover-content">Popover on bottom</span>
  <certara-button>Bottom</certara-button>
</certara-popover>

Popover on left

Left

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

<CertaraPopover opened={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 opened="true" size="sm" placement="left">
  <span slot="popover-content">Popover on left</span>
  <certara-button>Left</certara-button>
</certara-popover>

Popover on right

Right

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

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

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

Properties

`hasPadding`


Attribute	`has-padding`
Type	`boolean`
Default	`true`
Required	`false`
Description	Whether to add padding to the popover

`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	`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.