The Blazor Tooltip component is a lightweight, contextual information display that appears on hover or interaction. It provides users with additional information or guidance about UI elements without cluttering the interface. Tooltips are ideal for explaining icons, buttons, or complex functionality with minimal visual intrusion.

The simplest way to use the Tooltip component is to wrap any element with SfTooltip and provide Content. The tooltip appears on hover by default. This basic pattern works with any element - buttons, text, icons, or custom content. The Position property controls where the tooltip displays relative to the target element.

The Tooltip component supports various positioning options to control where the tooltip appears relative to the target element. You can set the Position property to one of the predefined values, such as TopLeft, TopCenter, TopRight, BottomLeft, BottomCenter, BottomRight, LeftTop, LeftCenter, LeftBottom, RightTop, RightCenter, or RightBottom.

The Tooltip component supports rich HTML content through the ContentTemplate property. This allows you to display formatted text, images, links, and other HTML elements inside the tooltip. The example demonstrates displaying an image with descriptive text and hyperlinks within the tooltip using a custom template.

The Tooltip component can be attached to multiple elements using CSS selectors via the Target property. This example demonstrates a toolbar where each button automatically displays a tooltip when hovered. The ShowTipPointer property displays an arrow pointer, and Width controls the tooltip size. This approach is efficient for applying tooltips to multiple similar elements.

The Tooltip component exposes several key properties for customization: Position controls where the tooltip appears, OpensOn determines the trigger event (Hover, Focus, Click, Auto) IsSticky keeps the tooltip visible until manually dismissed, and Content sets the tooltip text. This example provides interactive controls to dynamically change these properties and see real-time updates.

This example demonstrates tooltip integration with form validation using keyboard navigation. The tooltip appears when form fields receive focus, providing validation hints. The OpensOn property is set to Focus, which triggers tooltips on keyboard focus, and the Created event handler uses component references to manage focus programmatically without requiring JavaScript interop.

This advanced example demonstrates a dynamic tooltip that displays different menu content based on which button is clicked. The tooltip acts as a context menu showing wireless, device, or personal settings. The OnRender event refreshes the tooltip position, When OpensOn is set to Click, the tooltip triggers on button click, and the content updates dynamically based on user selection through event handlers.

Control tooltip visibility timing using ShowDelay and HideDelay properties (in milliseconds). The Animation property with Effect defines entrance/exit animations. Common effects include FadeIn, FadeOut, ZoomIn, ZoomOut, and None. This example demonstrates configurable delays and smooth animations for better UX.

Tooltips are useful for explaining why an action is disabled or unavailable. Wrap a disabled button with SfTooltip to show helpful information when users attempt to interact with the disabled control, providing clear feedback about its disabled state.

When MouseTrail is set to true, the tooltip follows the mouse cursor within the target element. This creates an interactive experience, with the tooltip's position updating dynamically as the user moves the mouse. When OpensOn is set to Hover, the tooltip appears on hover and follows the pointer, providing contextual information.