Tooltip
fluent-tooltip
The tooltip component is used provide extra information about another element when it is hovered.
Setup
import {
provideFluentDesignSystem,
fluentTooltip
} from "@fluentui/web-components";
provideFluentDesignSystem()
.register(
fluentTooltip()
);
Markup
<div>
<fluent-button id="anchor">Hover me</fluent-button>
<fluent-tooltip anchor="anchor">Tooltip text</fluent-tooltip>
</div>
Example
FluentTooltip
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.
Usage
@using Microsoft.Fast.Components.FluentUI
<FluentButton id="anchor1" Appearance=Appearance.Accent>Tooltip at the bottom</FluentButton>
<FluentTooltip Anchor="anchor1" Position=TooltipPosition.Bottom>I'm helping!</FluentTooltip>
<FluentButton id="anchor2" Appearance=Appearance.Accent>Tooltip at the end</FluentButton>
<FluentTooltip Anchor="anchor2" Position=TooltipPosition.End Delay=200>I'm helping!</FluentTooltip>
Example
See the component in action with implementation examples at the Blazor demo site.