Implementation:TobikoData Sqlmesh Common Tooltip
| Knowledge Sources | |
|---|---|
| Domains | Web_UI, Components |
| Last Updated | 2026-02-07 20:00 GMT |
Overview
A tooltip component built on Radix UI that displays contextual information on hover with configurable positioning and timing.
Description
The Tooltip component wraps Radix UI's tooltip primitives (TooltipProvider, TooltipRoot, TooltipTrigger, TooltipContent, TooltipPortal) to provide a streamlined API. It supports four positioning sides (top, bottom, left, right) and three alignment options (center, start, end) with customizable offsets. The component includes delay duration control for hover timing and renders content in a portal for proper z-index layering. Content appears in a styled container with shadow effects and CSS animations for smooth transitions (slideUpAndFade, slideDownAndFade, slideLeftAndFade, slideRightAndFade).
Usage
Use Tooltip to provide additional context or information about UI elements without cluttering the interface. The trigger can be any React element, typically icons, buttons, or text. Adjust delayDuration to control responsiveness (shorter delays for frequent use, longer for occasional reference). Use sideOffset and alignOffset to fine-tune positioning relative to the trigger element.
Code Reference
Source Location
- Repository: TobikoData_Sqlmesh
- File: web/common/src/components/Tooltip/Tooltip.tsx
Signature
export interface TooltipProps {
trigger: React.ReactNode
children: React.ReactNode
side?: 'top' | 'bottom' | 'left' | 'right'
align?: 'center' | 'start' | 'end'
delayDuration?: number
sideOffset?: number
alignOffset?: number
className?: string
}
export function Tooltip({
delayDuration = 200,
sideOffset = 0,
alignOffset = 0,
side = 'right',
align = 'center',
trigger,
children,
className,
}: TooltipProps) {
// Implementation
}
Import
import { Tooltip } from '@sqlmesh-common/components/Tooltip/Tooltip'
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| trigger | React.ReactNode | Yes | Element that triggers tooltip on hover |
| children | React.ReactNode | Yes | Tooltip content to display |
| side | 'bottom' | 'left' | 'right' | No | Tooltip position relative to trigger (default: 'right') |
| align | 'start' | 'end' | No | Tooltip alignment (default: 'center') |
| delayDuration | number | No | Milliseconds before tooltip appears (default: 200) |
| sideOffset | number | No | Distance from trigger in pixels (default: 0) |
| alignOffset | number | No | Offset along alignment axis in pixels (default: 0) |
| className | string | No | Additional CSS classes for tooltip content |
Outputs
| Name | Type | Description |
|---|---|---|
| element | React.ReactElement | Complete tooltip with trigger and content |
Usage Examples
// Basic tooltip
<Tooltip trigger={<InfoIcon />}>
Additional information about this feature
</Tooltip>
// Above the trigger
<Tooltip
trigger={<Button>Hover me</Button>}
side="top"
>
This appears above the button
</Tooltip>
// Quick tooltip (short delay)
<Tooltip
trigger={<HelpIcon />}
delayDuration={100}
>
Quick help text
</Tooltip>
// Positioned with offset
<Tooltip
trigger={<QuestionMark />}
side="right"
sideOffset={10}
align="start"
>
Offset from the trigger element
</Tooltip>
// Multi-line content
<Tooltip
trigger={<span>Complex Feature</span>}
side="bottom"
className="max-w-xs"
>
<div>
<p className="font-bold">Feature Name</p>
<p className="text-sm">
This feature allows you to perform advanced operations
with multiple configuration options.
</p>
</div>
</Tooltip>
// With custom styling
<Tooltip
trigger={<Badge>New</Badge>}
className="bg-blue-600 text-white"
>
This feature was added recently
</Tooltip>