TooltipTag

TooltipTag

TooltipTag wraps any content with Carbon's Tooltip to show an explanatory label on hover. When no tooltip text is provided, the component renders the children directly, making it usable as a conditional wrapper.

The component normalises primitive children with EmptyValueTag so empty or missing values render a consistent dash placeholder.

Source References

• Source: frontend/src/components/core/Tags/TooltipTag/index.tsx
• Tests: frontend/src/components/core/Tags/TooltipTag/index.unit.test.tsx

Public Interface

Props

Name	Type	Required	Default	Description
tooltip	string	No	—	Text shown in the tooltip on hover. Omit to render content without a tooltip wrapper.
children	ReactNode	No	—	Content to wrap. Primitive values are passed through EmptyValueTag. Element nodes are rendered inside a span for Carbon Tooltip compatibility.
align	TooltipAlignment	No	'top'	Tooltip alignment relative to the trigger. Supports all Carbon PopoverAlignment values including 'top', 'bottom', 'left', 'right', and compound values like 'top-start', 'bottom-end'.
autoAlign	boolean	No	false	When true, the tooltip automatically adjusts position to stay within the viewport.

TooltipAlignment includes:

'top' | 'bottom' | 'left' | 'right'
| 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end'
| 'left-end' | 'left-start' | 'right-end' | 'right-start'
| 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
| 'left-bottom' | 'left-top' | 'right-bottom' | 'right-top'

Behavior

• If tooltip is absent, renderContent() is returned directly with no Tooltip wrapper.
• If tooltip is present, content is wrapped in Carbon Tooltip with the provided align and autoAlign.
• children that are string, number, null, or undefined are rendered via EmptyValueTag to handle empty display with a fallback dash.
• Element children are wrapped in a <span> to satisfy Carbon Tooltip's trigger requirements.
• Default alignment is 'top'. autoAlign defaults to false.

Usage

Basic tooltip with element children

import TooltipTag from '@/components/core/Tags/TooltipTag';

<TooltipTag tooltip="Alder">
  <span>AL</span>
</TooltipTag>

Primitive value with tooltip

<TooltipTag tooltip="Description">Value</TooltipTag>

No tooltip — conditional rendering

<TooltipTag>Plain value, no tooltip</TooltipTag>

Custom alignment

<TooltipTag tooltip="Bottom aligned" align="bottom">
  <span>Content</span>
</TooltipTag>

Key Features

• Conditional tooltip wrapper: renders without Tooltip when tooltip is omitted.
• Empty value handling: integrates EmptyValueTag for primitive children.
• Full Carbon alignment support: accepts deprecated and new PopoverAlignment values.
• Auto-align option for viewport-aware positioning.

Known Constraints

• Primitive children are always processed by EmptyValueTag, so numeric zero renders as 0 and empty strings render as -.
• The component does not style the children; visual presentation depends on the child element or surrounding context.
• autoAlign behavior is controlled by Carbon's internal positioning logic.

See Also

• EmptyValueTag
• TagWrapper
• Components