Tooltips

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

Show design guidelines

Code

Framework HTML React Angular

Placement

Hover over a button to view the tooltip.

On the leftTooltip leftOn the topTooltip topOn the bottomTooltip bottomOn the rightTooltip right

Toggle dark mode

<certara-tooltip placement="left">
  <span slot="tooltip-content">On the left</span>
  <certara-button>Tooltip left</certara-button>
</certara-tooltip>
<certara-tooltip placement="top">
  <span slot="tooltip-content">On the top</span>
  <certara-button>Tooltip top</certara-button>
</certara-tooltip>
<certara-tooltip placement="bottom">
  <span slot="tooltip-content">On the bottom</span>
  <certara-button>Tooltip bottom</certara-button>
</certara-tooltip>
<certara-tooltip placement="right">
  <span slot="tooltip-content">On the right</span>
  <certara-button>Tooltip right</certara-button>
</certara-tooltip>

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

<CertaraTooltip placement="left">
  <span slot="tooltip-content">On the left</span>
  <CertaraButton>Tooltip left</CertaraButton>
</CertaraTooltip>
<CertaraTooltip placement="top">
  <span slot="tooltip-content">On the top</span>
  <CertaraButton>Tooltip top</CertaraButton>
</CertaraTooltip>
<CertaraTooltip placement="bottom">
  <span slot="tooltip-content">On the bottom</span>
  <CertaraButton>Tooltip bottom</CertaraButton>
</CertaraTooltip>
<CertaraTooltip placement="right">
  <span slot="tooltip-content">On the right</span>
  <CertaraButton>Tooltip right</CertaraButton>
</CertaraTooltip>

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

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-tooltip placement="left">
  <span slot="tooltip-content">On the left</span>
  <certara-button>Tooltip left</certara-button>
</certara-tooltip>
<certara-tooltip placement="top">
  <span slot="tooltip-content">On the top</span>
  <certara-button>Tooltip top</certara-button>
</certara-tooltip>
<certara-tooltip placement="bottom">
  <span slot="tooltip-content">On the bottom</span>
  <certara-button>Tooltip bottom</certara-button>
</certara-tooltip>
<certara-tooltip placement="right">
  <span slot="tooltip-content">On the right</span>
  <certara-button>Tooltip right</certara-button>
</certara-tooltip>

certara-tooltip

Properties

placement

Attribute	placement
Type	"bottom" | "bottom-start" | "left" | "left-start" | "right" | "right-start" | "top" | "top-start"
Default	undefined
Required	false
Description	Position defaults to undefined which automatically picks an unobstructed direction

position

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

Events

There are no events available for this component

Methods

There are no public methods available for this component

Slots

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