Tooltip

Show design guidelines

Code

Framework HTML React Angular

Default

Hover me

Toggle dark mode

<certara-tooltip content="Default tooltip">
  <certara-button>Hover me</certara-button>
</certara-tooltip>

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

<CertaraTooltip content="Default tooltip">
  <CertaraButton>Hover me</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 content="Default tooltip">
  <certara-button>Hover me</certara-button>
</certara-tooltip>

Placement

LeftTopBottomRight

Toggle dark mode

<certara-tooltip placement="left" content="Left tooltip">
  <certara-button>Left</certara-button>
</certara-tooltip>
<certara-tooltip placement="top" content="Top tooltip">
  <certara-button>Top</certara-button>
</certara-tooltip>
<certara-tooltip placement="bottom" content="Bottom tooltip">
  <certara-button>Bottom</certara-button>
</certara-tooltip>
<certara-tooltip placement="right" content="Right tooltip">
  <certara-button>Right</certara-button>
</certara-tooltip>

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

<CertaraTooltip placement="left" content="Left tooltip">
  <CertaraButton>Left</CertaraButton>
</CertaraTooltip>
<CertaraTooltip placement="top" content="Top tooltip">
  <CertaraButton>Top</CertaraButton>
</CertaraTooltip>
<CertaraTooltip placement="bottom" content="Bottom tooltip">
  <CertaraButton>Bottom</CertaraButton>
</CertaraTooltip>
<CertaraTooltip placement="right" content="Right tooltip">
  <CertaraButton>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" content="Left tooltip">
  <certara-button>Left</certara-button>
</certara-tooltip>
<certara-tooltip placement="top" content="Top tooltip">
  <certara-button>Top</certara-button>
</certara-tooltip>
<certara-tooltip placement="bottom" content="Bottom tooltip">
  <certara-button>Bottom</certara-button>
</certara-tooltip>
<certara-tooltip placement="right" content="Right tooltip">
  <certara-button>Right</certara-button>
</certara-tooltip>

Slotted content

Slotted tooltip contentHover me

Toggle dark mode

<certara-tooltip>
  <span slot="tooltip-content">
    Slotted
    <strong>tooltip</strong>
    content
  </span>
  <certara-button>Hover me</certara-button>
</certara-tooltip>

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

<CertaraTooltip>
  <span slot="tooltip-content">
    Slotted
    <strong>tooltip</strong>
    content
  </span>
  <CertaraButton>Hover me</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>
  <span slot="tooltip-content">
    Slotted
    <strong>tooltip</strong>
    content
  </span>
  <certara-button>Hover me</certara-button>
</certara-tooltip>

certara-tooltip

A tooltip component that displays contextual information when users hover over or focus on an element. The tooltip automatically positions itself to avoid viewport boundaries and can be configured with various placement options.

Properties

content

Attribute	content
Type	string
Default	undefined
Required	false
Description	Text content for the tooltip. This prop can be used as an alternative to or in combination with the tooltip-content slot.

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. This is the element that triggers the tooltip display.
tooltip-content	Optional slot if rich content is needed for the tooltip content for the tooltip.