Tooltip
The <FluentTooltip> component is used to provide extra information about another element when it is hovered.
<FluentTooltip> wraps the <fluent-tooltip> element, a web component implementation of a tooltip composition leveraging the
Fluent UI design system.
Using Tooltip Service Provider
We advise you to always use this service when working with tooltips so all definitions will be generated with global options and will be written at the end of the HTML page to support different z-index levels.
Also, the later described option on having a tooltip appear on a click event will only work when using the Tooltip Service Provider.
In the Program.cs, inject the Tooltip service with global options. You can also use the Services.AddFluentUIComponents method to register all required FluentUI services, including this one.
builder.Services.AddScoped<ITooltipService, TooltipService>();At the end of your MainLayout.razor page, include the provider:
<FluentTooltipProvider />
For the <FluentTooltipProvider/> to work properly, it needs interactivity! If you are using "per page" interactivity, make sure to add a @rendermode to
either the provider itself or the component the provider is placed in.
Example
Examples
Default
Large tooltip
Different delays
Unlike the other tooltip examples, these contain the
HideTooltipOnCursorLeave attribute.
which hides the tooltip when the cursor leaves (i.e. not hovering) its anchor (even when the cursor hovers the tooltip itself).
Always visible
Documentation
FluentTooltip Class
Parameters
Name | Type | Default | Description |
|---|---|---|---|
Anchor | string | Required. Gets or sets the control identifier associated with the tooltip. | |
AutoUpdateMode | AutoUpdateMode? | Controls when the tooltip updates its position, default is anchor which only updates when the anchor is resized. Auto will update on scroll/resize events. Corresponds to anchored-region auto-update-mode. | |
ChildContent | RenderFragment? | Gets or sets the content to be rendered inside the component. | |
Delay | int? | 300 | Gets or sets the delay (in milliseconds). Default is 300. |
HideTooltipOnCursorLeave | bool? | Gets or sets the value indicating whether the library should close the tooltip if the cursor leaves the anchor and the tooltip. By default, the tooltip closes if the cursor leaves the anchor, but not the tooltip itself. You can configure this behavior globally using the LibraryConfiguration.HideTooltipOnCursorLeave property. | |
HorizontalViewportLock | bool | False | Gets or sets whether the horizontal viewport is locked. |
MaxWidth | string? | Gets or sets the maximum width of tooltip panel. | |
Position | TooltipPosition? | Gets or sets the tooltip's position. See TooltipPosition.Don't set this if you want the tooltip to use the best position. | |
UseTooltipService | bool | True | Use ITooltipService to create the tooltip, if this service was injected. If the FluentTooltip.ChildContent is dynamic, set this to false.Default, true. |
VerticalViewportLock | bool | False | Gets or sets whether the vertical viewport is locked. |
Visible | bool | False | Gets or sets a value indicating whether the tooltip is visible. |
EventCallbacks
Name | Type | Description |
|---|---|---|
OnDismissed | EventCallback<EventArgs> | Callback for when the tooltip is dismissed. |