Skip to content
Mizen UI
Docs

IntroductionInstallationCLIStylingFoundationsThemingCompositionIntegrationsAccessibilityFor agents

useCopyToClipboard

AccordionAspect RatioCardCollapsibleFrameGridGroupInlineScroll AreaSectionSeparatorSpacerStack

BlockquoteCitationCodeHeadingKbdLabelLinkTextVisually Hidden

ButtonButton GroupToggleToggle groupToolbar

CalendarCheckboxCheckbox groupComboboxDate pickerDate range pickerDate-Time InputFieldFieldsetFile UploadFormInputInput groupNumber fieldOTP FieldRadio groupSelectSliderSwitchTextareaTime Input

BreadcrumbMenubarNavigation MenuPaginationSegmented ControlStepperTabs

Alert dialogCommandContext MenuDialogDrawerMenuPopoverPreview CardSheetTooltip

AlertBadgeEmptyError StateMeterProgressSkeletonSpinnerStatus dotToast

Activity FeedAvatarAvatar GroupData TableListMetricOverflow ListProperty ListTableTokenTree

Area ChartBar ListCalendar HeatmapCategory ComparisonChart FrameChart LegendChart TooltipDistributionFunnelHeatmapMetric TrendPart-to-WholeProgress RingsRadar ChartRadial BarsSankey ChartScatter ChartScore GaugeTime Series

Diagram

AttachmentCarouselCode BlockLightboxMarkdownThumbnailTimestamp

Agent ThinkingApproval CardComposerConversationInline CitationMessageMessage ScrollerQuestion CardSourcesStreaming TextSuggestionTask ListTerminalTool Call

On this page

  • Preview
  • Usage
  • Anatomy
  • Examples
  • Project shortcuts
  • Grouped tooltips
  • Animated tooltips
  • Positions
  • Disabled
  • Controlled and long content
  • Recommendations
  • Usage boundaries
  • API reference

Overlays

Tooltip

Adds concise supplementary context on hover or focus.

idle

Usage

import {
	Tooltip,
	TooltipPopup,
	TooltipProvider,
	TooltipTrigger,
} from "@mizen-labs/ui";

Anatomy

The parts and how they nest, taken from the preview above.

<TooltipProvider>
	<Tooltip>
		<TooltipTrigger />
		<TooltipPopup />
	</Tooltip>
</TooltipProvider>

Examples

Project shortcuts

Hover or focus an action to see its description.

Grouped tooltips

Adjacent hints open instantly after the first hint.

Animated tooltips

Detached triggers share one popup that changes position, size, and content.

Positions

Hints can appear on each side of their trigger.

Disabled

Disable supplementary hints without disabling the action.

Controlled and long content

Controlled state, kept-mounted portals, and long identifiers.

Recommendations

GuidancePractice
Do

Use a short explanation for a control whose intent needs clarification.

Do

Group adjacent hints with TooltipProvider. Use TooltipCreateHandle for one popup that moves between detached triggers.

Usage boundaries

GuidanceBoundary
Scope

Do not place interactive content in a tooltip; use Popover.

Scope

Keep required instructions visible rather than available only on hover.

API reference

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

PropTypeDefaultDescription
TooltipTooltipProps<Payload>—Native Base UI root with controlled state, disabled state, handles, and payloads.
TooltipTriggerTooltipTriggerProps<Payload>—Render composition, refs, and detached handles.
TooltipPopupTooltipPopupProps—Mizen popup with render props and an animated viewport.
TooltipProviderTooltipProviderPropsNative defaultsNative Base UI grouping, hover delay, close delay, and timeout.
TooltipCreateHandletypeof TooltipPrimitive.createHandle—Creates a typed handle for detached triggers sharing a popup.
TooltipPrimitivetypeof BaseTooltip—All native Base UI Tooltip parts.
sideTooltipPopupProps["side"]"top"Popup side.
alignTooltipPopupProps["align"]"center"Alignment relative to the anchor.
sideOffsetTooltipPopupProps["sideOffset"]4Gap from the anchor in pixels.
anchorTooltipPopupProps["anchor"]—Custom element, ref, or virtual positioning anchor.
portalPropsTooltipPrimitive.Portal.Props—Full native portal props including container, render, and keepMounted.
PreviousSheetNextAlert

Northstar launch

Create a project item or preview the release details.