Skip to main content

fast-tooltip

The fast-tooltip component is used provide extra information about another element when it is hovered.

Setup#

import {    provideFASTDesignSystem,    fastTooltip} from "@microsoft/fast-components";
provideFASTDesignSystem()    .register(        fastTooltip()    );

Usage#

<div>    <fast-button id="anchor">Hover me</fast-button>    <fast-tooltip anchor="anchor">Tooltip text</fast-tooltip></div>

Create your own design#

import { tooltipTemplate as template, Tooltip } from "@microsoft/fast-foundation";import { tooltipStyles as styles } from "./my-tooltip.styles";
export const myTooltip = Tooltip.compose({    baseName: "tooltip",    template,    styles,});

Additional resources#