Skip to main content

fast-tooltip

The fast-tooltip component is used to 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,
});

API

Variables

NameDescriptionType
TooltipPositionEnumerates possible tooltip positions{ top: "top", right: "right", bottom: "bottom", left: "left", start: "start", end: "end", topLeft: "top-left", topRight: "top-right", bottomLeft: "bottom-left", bottomRight: "bottom-right", topStart: "top-start", topEnd: "top-end", bottomStart: "bottom-start", bottomEnd: "bottom-end", }

class: Tooltip

Superclass

NameModulePackage
FoundationElement/src/foundation-element/foundation-element.js

Fields

NamePrivacyTypeDefaultDescriptionInherited From
visiblepublicbooleanWhether the tooltip is visible or not. If undefined tooltip is shown when anchor element is hovered
anchorpublicstring""The id of the element the tooltip is anchored to
delaypublicnumber300The delay in milliseconds before a tooltip is shown after a hover event
positionpublicTooltipPositionControls the placement of the tooltip relative to the anchor. When the position is undefined the tooltip is placed above or below the anchor based on available space.
autoUpdateModepublicAutoUpdateMode"anchor"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.
horizontalViewportLockpublicbooleanControls if the tooltip will always remain fully in the viewport on the horizontal axis
verticalViewportLockpublicbooleanControls if the tooltip will always remain fully in the viewport on the vertical axis
anchorElementpublicHTMLElement or nullnullthe html element currently being used as anchor. Setting this directly overrides the anchor attribute.
$presentationpublicComponentPresentation or nullA property which resolves the ComponentPresentation instance for the current component.FoundationElement
templatepublicElementViewTemplate or void or nullSets the template of the element instance. When undefined, the element will attempt to resolve the template from the associated presentation or custom element definition.FoundationElement
stylespublicElementStyles or void or nullSets the default styles for the element instance. When undefined, the element will attempt to resolve default styles from the associated presentation or custom element definition.FoundationElement

Methods

NamePrivacyDescriptionParametersReturnInherited From
templateChangedprotectedvoidFoundationElement
stylesChangedprotectedvoidFoundationElement

Events

NameTypeDescriptionInherited From
dismissFires a custom 'dismiss' event when the tooltip is visible and escape key is pressed

Attributes

NameFieldInherited From
visible
anchoranchor
delaydelay
positionposition
auto-update-modeautoUpdateMode
horizontal-viewport-lockhorizontalViewportLock
vertical-viewport-lockverticalViewportLock

CSS Parts

NameDescription
tooltipThe tooltip element

Slots

NameDescription
The default slot for the tooltip content

Additional resources