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

Please see the Blazor documentation and demo site for more information.

Additional Resources

Code in GitHub W3C Component Aria Practices