Tooltip
Use RzTooltip to show concise, non-interactive contextual hints for buttons, links, and icons. Wrap related tooltips in a TooltipProvider when you want shared delay settings. This example wraps a section with A direct equivalent to the common pattern Tooltip follows the WAI-ARIA Authoring Practices tooltip pattern for non-modal descriptive content. The trigger references the tooltip with Tooltip opens on pointer hover and keyboard focus using the configured delay. It closes on pointer leave, blur, or Escape. Pressing Escape closes a visible tooltip and returns focus to the trigger. Tooltip does not trap focus and the content itself is not focusable. Keep Screen readers announce tooltip text through the trigger description relationship when the trigger receives focus. There is no live region because tooltip text should not interrupt the current task, and repeated hover changes should not create extra announcements. Hoverable content is preserved for pointer users when The following tables summarize primary tooltip parameters. Tooltip positioning and interactions are implemented by Alpine TooltipProvider and shows nested RzTooltip components using TooltipTrigger and TooltipContent.<TooltipProvider DelayDuration="250" SkipDelayDuration="300">
<section class="flex flex-wrap items-center gap-4">
<RzTooltip>
<TooltipTrigger AsChild>
<RzButton Variant="ThemeVariant.Primary">Save</RzButton>
</TooltipTrigger>
<TooltipContent>
Save your current changes.
</TooltipContent>
</RzTooltip>
<RzTooltip>
<TooltipTrigger AsChild>
<RzButton Variant="ThemeVariant.Secondary">Share</RzButton>
</TooltipTrigger>
<TooltipContent Anchor="AnchorPoint.Top">
Invite collaborators to this document.
</TooltipContent>
</RzTooltip>
</section>
</TooltipProvider><Tooltip><TooltipTrigger>...</TooltipTrigger><TooltipContent>...</TooltipContent></Tooltip>, using RizzyUI names.<RzTooltip>
<TooltipTrigger AsChild>
<RzButton Variant="ThemeVariant.Secondary">Hover me</RzButton>
</TooltipTrigger>
<TooltipContent>
A simple tooltip.
</TooltipContent>
</RzTooltip>aria-describedby, and the floating content renders with role="tooltip" and a stable ID relationship.TooltipContent short and non-interactive. Links, buttons, forms, menus, and other disclosure content belong in RzPopover, which is designed for interactive popover semantics.DisableHoverableContent is false, but the content must still remain non-interactive. The implementation remains SSR-safe and CSP-compatible: server-rendered markup provides the role and ID relationships, while Alpine updates visibility state without Blazor event handlers.Property Description Type Default ChildContentShould include TooltipTrigger and TooltipContent.RenderFragmentRequired AnchorPreferred anchor placement around trigger. AnchorPointTopDelayDurationOpen delay in milliseconds. int700OpenControlled open state rendered for the Alpine runtime. bool?nullDefaultOpenInitial open state when uncontrolled. boolfalseDisableHoverableContentDisables pointer hover persistence over the floating content. Content must remain non-interactive either way. boolfalseAriaLabelOptional label for the tooltip scope container. The trigger-to-content description uses generated IDs automatically. string?LocalizedProperty Description Type Default ChildContentNested tooltips receiving shared defaults. RenderFragmentRequired DelayDurationShared delay before opening. int0SkipDelayDurationWindow after close where reopen skips full delay. int300DisableHoverableContentShared setting that disables pointer hover persistence over tooltip content. boolfalsex-data component rzTooltip.Method Parameters Description queueOpenNoneStarts the delayed open pipeline and shows tooltip. queueCloseNoneStarts delayed close behavior and hides tooltip. handleWindowEscapeNoneClears pending timers, closes the tooltip, and restores focus to the trigger. updatePositionNoneRecomputes floating position using current anchor options.