HelixOverviewDocsComponentsSandboxTheme builderCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
TooltipView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA short description that appears beside what it describes.ExperimentalSince 0.1.0OverlaysUsageimport'@fusion.dev/helix/tooltip'import'@fusion.dev/helix-headless/tooltip'Preview
API ReferenceRoothelix-tooltipA short description that appears beside what it describes.
PropTypeDefaultDescriptioncontentstring""The text shown in the bubble.defaultOpenbooleanfalseInitial open state for uncontrolled use, where nothing declared one.delaynumber400How long the pointer must rest before the bubble appears, in milliseconds.delayOutnumber100How long the bubble stays after the pointer leaves, in milliseconds.disabledbooleanfalseWhether the tooltip never shows.forstring""The id of the element this describes, in this tooltip's own tree.material"frosted"|"glass"What the bubble is made of.offsetnumber8Space between the trigger and the point of the bubble, in pixels.openbooleanWhether the element is open.persistbooleanfalseWhether the bubble survives the trigger being used.placementPlacement"top"Preferred side.withinstring""The id of a box to keep the bubble inside, instead of the viewport.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The trigger.contentThe bubble's content, when `content` is not enough. Anything slotted here replaces the property, which is this slot's fallback.
EventTypeDescriptionhelix-before-closeHelixBeforeCloseEventFired before it hides, and cancelable.helix-before-openHelixBeforeOpenEventFired before the bubble shows, and cancelable.toggleEventSays the state moved, carrying `newState` and `oldState`.
MethodTypeDescriptionhide() => voidCloses the bubble, and cancels a show that had not happened yet.reposition() => voidPlaces the bubble again, for an anchor that moved without the page moving.requestOpen(next: boolean) => booleanRequests an open-state change, and reports whether it was applied.show() => voidShows the bubble, unless there is nothing to show.toggleOpen() => booleanRequests the opposite of the current state.
PartDescriptionarrowThe point, resting against the trigger.tooltipThe bubble.
CSS PropertyDescription--tooltip-arrow-sizeSize of the point at the bubble's edge.--tooltip-backdropBlur behind a `glass` bubble.--tooltip-background-colorFill of the bubble.--tooltip-max-inline-sizeWidest the bubble grows before wrapping.
Roothelix-headless-tooltipA short description that appears beside what it describes.
PropTypeDefaultDescriptioncontentstring""The text shown in the bubble.defaultOpenbooleanfalseInitial open state for uncontrolled use, where nothing declared one.delaynumber400How long the pointer must rest before the bubble appears, in milliseconds.delayOutnumber100How long the bubble stays after the pointer leaves, in milliseconds.disabledbooleanfalseWhether the tooltip never shows.forstring""The id of the element this describes, in this tooltip's own tree.offsetnumber8Space between the trigger and the point of the bubble, in pixels.openbooleanWhether the element is open.persistbooleanfalseWhether the bubble survives the trigger being used.placementPlacement"top"Preferred side.withinstring""The id of a box to keep the bubble inside, instead of the viewport.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The trigger.contentThe bubble's content, when `content` is not enough. Anything slotted here replaces the property, which is this slot's fallback.
EventTypeDescriptionhelix-before-closeHelixBeforeCloseEventFired before it hides, and cancelable.helix-before-openHelixBeforeOpenEventFired before the bubble shows, and cancelable.toggleEventSays the state moved, carrying `newState` and `oldState`.
MethodTypeDescriptionhide() => voidCloses the bubble, and cancels a show that had not happened yet.reposition() => voidPlaces the bubble again, for an anchor that moved without the page moving.requestOpen(next: boolean) => booleanRequests an open-state change, and reports whether it was applied.show() => voidShows the bubble, unless there is nothing to show.toggleOpen() => booleanRequests the opposite of the current state.
PartDescriptionarrowThe point, resting against the trigger.tooltipThe bubble.
ExamplesNameDescriptionDescribedA tooltip that describes its target rather than naming it.EventsA bubble that opens on hover and on focus, and says so both ways.Kept InsideA bubble clamped to a box of the page's choosing rather than to the window.MaterialA glass bubble, for a page whose surfaces are glass.PlacementsThe twelve positions a tooltip can take around its anchor.PreviewA word of explanation on hover and on focus.PreviewA word of explanation on hover and on focus.Rich ContentMore than a line, for a tooltip that has something to explain.TimingThe rest before it appears and the grace after, and how far it sits from its trigger.