Implementation:TobikoData Sqlmesh Information
| Knowledge Sources | |
|---|---|
| Domains | Web_UI, Components |
| Last Updated | 2026-02-07 20:00 GMT |
Overview
A component that pairs text with an info icon that displays a tooltip on hover.
Description
The Information component combines content with an info icon (from lucide-react) that triggers a Tooltip on hover. It uses a horizontal flex layout with gap spacing and applies text-typography-info CSS variable for consistent theming. The component provides control over tooltip positioning (left/right), size variants matching standard size types, and fully customizable delay timing and offset distances. The icon defaults to the Lucide Info component but can be replaced with custom React nodes through the infoIcon prop.
Usage
Use Information to provide contextual help or additional details next to labels, headings, or form fields. The tooltip content can contain formatted text, links, or other React elements. Customize the icon when the standard info icon doesn't match your design needs (e.g., using question mark or help icons).
Code Reference
Source Location
- Repository: TobikoData_Sqlmesh
- File: web/common/src/components/Typography/Information.tsx
Signature
export interface InformationProps {
children?: React.ReactNode
className?: string
classNameTooltip?: string
side?: 'right' | 'left'
size?: Size
sideOffset?: number
delayDuration?: number
info?: React.ReactNode
infoIcon?: React.ReactNode
}
export function Information({
children,
className,
classNameTooltip,
side = 'right',
size = 's',
sideOffset = 4,
delayDuration = 200,
info,
infoIcon = <Info aria-label="Info Icon" size={16} />,
...props
}: InformationProps) {
// Implementation
}
Import
import { Information } from '@sqlmesh-common/components/Typography/Information'
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| children | React.ReactNode | No | Content to display next to info icon |
| info | React.ReactNode | No | Tooltip content to display on hover |
| infoIcon | React.ReactNode | No | Custom icon element (default: Info icon from lucide-react) |
| className | string | No | Additional CSS classes for container |
| classNameTooltip | string | No | Additional CSS classes for tooltip |
| side | 'left' | No | Tooltip position (default: 'right') |
| size | Size | No | Text size variant (default: 's') |
| sideOffset | number | No | Distance from icon in pixels (default: 4) |
| delayDuration | number | No | Milliseconds before tooltip appears (default: 200) |
Outputs
| Name | Type | Description |
|---|---|---|
| element | React.ReactElement | Container with content and info icon with tooltip |
Usage Examples
// Basic usage with label
<Information info="This field is required for validation">
Username
</Information>
// Form field with help
<div>
<Information
info="Password must be at least 8 characters"
side="left"
>
Password:
</Information>
<Input type="password" />
</div>
// Custom icon
<Information
info="Click for more details"
infoIcon={<HelpCircle size={16} />}
>
Advanced Settings
</Information>
// Rich tooltip content
<Information
info={
<div>
<p className="font-bold">Pro Tip</p>
<p>You can use keyboard shortcuts:</p>
<ul>
<li>Ctrl+S to save</li>
<li>Ctrl+Z to undo</li>
</ul>
</div>
}
classNameTooltip="max-w-sm"
>
Editor
</Information>
// Larger text size
<Information
info="Detailed explanation here"
size="l"
>
Section Heading
</Information>
// No children (just icon)
<Information info="Standalone help tooltip" />
// Custom styling
<Information
info="Important configuration option"
className="text-blue-600 font-semibold"
classNameTooltip="bg-blue-100 text-blue-900"
>
Configuration
</Information>