HelixOverviewComponentsMapsGraphIntroductionInstallationDeriving a themeSandboxTheme builderVisual testingCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
TooltipView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA short text that appears next to an element on hover and focus.StableSince 0.1.0OverlaysUsageimport'@fusion.dev/helix/tooltip'import'@fusion.dev/helix-headless/tooltip'Preview
API ReferenceRoothelix-tooltipA short text that appears next to an element on hover and focus.
PropTypeDescriptioncontentstringDefault""The text shown in the bubble.defaultOpenbooleanDefaultfalseWhether the element starts open. Ignored once open is written.delaynumberDefault400How long the pointer must rest before the bubble appears, in milliseconds.
The attribute also takes a CSS time, such as 0.4s.delayOutnumberDefault100How long the bubble stays after the pointer leaves the trigger or the
bubble, in milliseconds: the close delay. It is the time a reader has to
cross the gap onto the bubble. The attribute also takes a CSS time, such as
0.1s.disabledbooleanDefaultfalseStops the tooltip from showing.forstringDefault""The id of the element the tooltip describes, in the same document or shadow
root as the tooltip.hoverablebooleanDefaulttrueWhether the pointer can move onto the bubble and the bubble stays, so a
reader can read it under a magnifier or select its words, as WCAG 1.4.13
asks. hoverable="false" hides the bubble once the pointer reaches it,
for a bubble that covers something a reader moves on to.material"frosted"|"glass"The bubble's surface: frosted or glass.offsetnumberDefault8The space between the trigger and the tip of the bubble, in pixels.openbooleanWhether the element is open.persistbooleanDefaultfalseKeeps the bubble open when the trigger is used, such as a copy button whose
tooltip changes to "Copied".placement"bottom"|"bottom-end"|"bottom-start"|"left"|"left-end"|"left-start"|"right"|"right-end"|"right-start"|"top"|"top-end"|"top-start"Default"top"The side to show the bubble on.showOn"focus"What shows the bubble. Unset, it is a pointer resting on the trigger and
keyboard focus. focus is keyboard focus alone, for a hint a pointer does
not need, such as a shortcut a mouse reader has no use for.skipDelaynumberDefault300How long after a tooltip hides the next one still shows at once, with no
delay, in milliseconds. The same skip delay Radix uses. Zero makes every
tooltip wait. The attribute also takes a CSS time, such as 0.3s.withinstringDefault""The id of a box to keep the bubble inside. Defaults to the viewport.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The trigger, in the wrapping form. The tooltip describes it, as it describes the element for names.contentRich content for the bubble. It replaces the content property.
EventTypeDescriptionhelix-before-closeHelixBeforeCloseEventThe bubble is about to hide. Cancelable: cancel it to keep it shown.helix-before-openHelixBeforeOpenEventThe bubble is about to show. Cancelable: cancel it to keep it hidden.toggleToggleEventThe bubble opened or closed. The event carries newState and oldState.
MethodTypeDescriptionhide() => voidHides the bubble, and cancels a pending show.reposition() => voidPositions the bubble again, for a trigger that moved while the page did not.requestOpen(next: boolean) => booleanRequests that the element open or close, and returns whether the change
was applied.show() => voidShows the bubble, if it has content.toggleOpen() => booleanRequests the opposite of the current state.
PartDescriptionarrowThe arrow that points at the trigger.arrow-bottomAdded to arrow while the bubble is below its trigger, with the arrow on the bubble's top edge.arrow-leftAdded to arrow while the bubble is left of its trigger, with the arrow on the bubble's right edge.arrow-rightAdded to arrow while the bubble is right of its trigger, with the arrow on the bubble's left edge.arrow-topAdded to arrow while the bubble is above its trigger, with the arrow on the bubble's bottom edge.surfaceThe bubble.surface-bottomAdded to surface while the bubble is below its trigger.surface-leftAdded to surface while the bubble is left of its trigger.surface-rightAdded to surface while the bubble is right of its trigger.surface-topAdded to surface while the bubble is above its trigger.
CSS PropertyDescription--tooltip-arrow-sizeThe size of the arrow on the bubble's edge.--tooltip-backdropThe blur behind a frosted or glass bubble.--tooltip-background-colorThe fill of the bubble.--tooltip-border-colorThe edge of a frosted or glass bubble, the only kind that draws one.--tooltip-colorThe color of the bubble's words.--tooltip-font-sizeThe size of the bubble's words.--tooltip-gapThe space between two things slotted into the bubble, such as a glyph and its words.--tooltip-max-inline-sizeThe widest the bubble grows before its text wraps.--tooltip-paddingThe space between the bubble's edge and its words.--tooltip-radiusThe bubble's corner radius.
Custom stateDescriptionenteringFrom the moment the bubble shows until its entrance has finished.exitingFrom the moment the bubble hides until its exit has finished.openWhile the tooltip shows.placed-bottomWhile the bubble sits below its trigger.placed-leftWhile the bubble sits to the left of its trigger.placed-rightWhile the bubble sits to the right of its trigger.placed-topWhile the bubble sits above its trigger.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Roothelix-headless-tooltipA short text that appears next to an element on hover and focus.
PropTypeDescriptioncontentstringDefault""The text shown in the bubble.defaultOpenbooleanDefaultfalseWhether the element starts open. Ignored once open is written.delaynumberDefault400How long the pointer must rest before the bubble appears, in milliseconds.
The attribute also takes a CSS time, such as 0.4s.delayOutnumberDefault100How long the bubble stays after the pointer leaves the trigger or the
bubble, in milliseconds: the close delay. It is the time a reader has to
cross the gap onto the bubble. The attribute also takes a CSS time, such as
0.1s.disabledbooleanDefaultfalseStops the tooltip from showing.forstringDefault""The id of the element the tooltip describes, in the same document or shadow
root as the tooltip.hoverablebooleanDefaulttrueWhether the pointer can move onto the bubble and the bubble stays, so a
reader can read it under a magnifier or select its words, as WCAG 1.4.13
asks. hoverable="false" hides the bubble once the pointer reaches it,
for a bubble that covers something a reader moves on to.offsetnumberDefault8The space between the trigger and the tip of the bubble, in pixels.openbooleanWhether the element is open.persistbooleanDefaultfalseKeeps the bubble open when the trigger is used, such as a copy button whose
tooltip changes to "Copied".placement"bottom"|"bottom-end"|"bottom-start"|"left"|"left-end"|"left-start"|"right"|"right-end"|"right-start"|"top"|"top-end"|"top-start"Default"top"The side to show the bubble on.showOn"focus"What shows the bubble. Unset, it is a pointer resting on the trigger and
keyboard focus. focus is keyboard focus alone, for a hint a pointer does
not need, such as a shortcut a mouse reader has no use for.skipDelaynumberDefault300How long after a tooltip hides the next one still shows at once, with no
delay, in milliseconds. The same skip delay Radix uses. Zero makes every
tooltip wait. The attribute also takes a CSS time, such as 0.3s.withinstringDefault""The id of a box to keep the bubble inside. Defaults to the viewport.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The trigger, in the wrapping form. The tooltip describes it, as it describes the element for names.contentRich content for the bubble. It replaces the content property.
EventTypeDescriptionhelix-before-closeHelixBeforeCloseEventThe bubble is about to hide. Cancelable: cancel it to keep it shown.helix-before-openHelixBeforeOpenEventThe bubble is about to show. Cancelable: cancel it to keep it hidden.toggleToggleEventThe bubble opened or closed. The event carries newState and oldState.
MethodTypeDescriptionhide() => voidHides the bubble, and cancels a pending show.reposition() => voidPositions the bubble again, for a trigger that moved while the page did not.requestOpen(next: boolean) => booleanRequests that the element open or close, and returns whether the change
was applied.show() => voidShows the bubble, if it has content.toggleOpen() => booleanRequests the opposite of the current state.
PartDescriptionarrowThe arrow that points at the trigger.arrow-bottomAdded to arrow while the bubble is below its trigger, with the arrow on the bubble's top edge.arrow-leftAdded to arrow while the bubble is left of its trigger, with the arrow on the bubble's right edge.arrow-rightAdded to arrow while the bubble is right of its trigger, with the arrow on the bubble's left edge.arrow-topAdded to arrow while the bubble is above its trigger, with the arrow on the bubble's bottom edge.surfaceThe bubble.surface-bottomAdded to surface while the bubble is below its trigger.surface-leftAdded to surface while the bubble is left of its trigger.surface-rightAdded to surface while the bubble is right of its trigger.surface-topAdded to surface while the bubble is above its trigger.
Custom stateDescriptionenteringFrom the moment the bubble shows until its entrance has finished.exitingFrom the moment the bubble hides until its exit has finished.openWhile the tooltip shows.placed-bottomWhile the bubble sits below its trigger.placed-leftWhile the bubble sits to the left of its trigger.placed-rightWhile the bubble sits to the right of its trigger.placed-topWhile the bubble sits above its trigger.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Examples
NameDescriptionDelay And OffsetThe delay before the bubble appears, the delay before it hides, and its distance from the trigger.DescribedTooltips that describe their controls, linked with for and aria-describedby.EventsThe events a tooltip sends when it opens on hover or on focus.Kept InsideA bubble kept inside a box you name with within.MaterialA tooltip with the default material beside one with material set to glass.PlacementsTooltips above, below, left of, and right of their buttons.PreviewA short explanation shown on hover and on focus.PreviewA short explanation shown on hover and on focus.Rich ContentA tooltip with markup in the content slot, such as keyboard keys.