InfoTooltip

InfoTooltip renders a small information icon that shows a tooltip on hover or focus. Use it to attach contextual help to a label or field without cluttering the UI. It's built on Fluent UI's TooltipHost, so it accepts that component's props (like content, delay, calloutProps).

When to use

• Explain a field, setting, or metric inline next to its label.

note

The component renders nothing when content is empty — safe to bind conditionally.

Import

import { InfoTooltip } from '@spartanfx/react';

Basic usage

Pass the help text as content.

<label>
  API key <InfoTooltip content="Found under Settings → Developer." />
</label>

Variants

variant controls the icon's color/emphasis.

<InfoTooltip content="Standard hint." variant="default" />
<InfoTooltip content="Worth your attention." variant="primary" />
<InfoTooltip content="Changing this affects dependent items." variant="warning" />

Custom icon

<InfoTooltip content="Help" iconProps={{ iconName: 'Info', className: 'my-icon' }} />

Key props

Prop	Type	Default	Notes
content	ReactNode	—	Tooltip text (inherited from Fluent TooltipHost). Nothing renders if empty.
variant	'default' | 'primary' | 'warning'	'default'	Icon color/emphasis.
iconProps	{ iconName?; className? }	—	Choose an in-house glyph and style it.

Plus all Fluent UI TooltipHost props (delay, calloutProps, …).

See the full generated reference: InfoTooltip API ↗.

See also

• Icons
• Components overview