Tooltip

  • Article

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.

Additional Resources

Code in GitHub W3C Component Aria Practices