@fluentui/web-components 3.0.0-beta.72 → 3.0.0-beta.73

package/dist/esm/tooltip/tooltip.template.js

@@ -0,0 +1,11 @@
+import { html } from '@microsoft/fast-element';
+/**
+ * Template for the tooltip component
+ * @public
+ */
+export const template = html `
+  <template popover aria-hidden="true">
+    <slot></slot>
+  </template>
+`;
+//# sourceMappingURL=tooltip.template.js.map

package/dist/esm/tooltip/tooltip.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.template.js","sourceRoot":"","sources":["../../../src/tooltip/tooltip.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAG/C;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAS;;;;CAIpC,CAAC"}

package/dist/web-components.d.ts

@@ -9943,6 +9943,130 @@ export declare const ToggleButtonStyles: ElementStyles;
  */
 export declare const ToggleButtonTemplate: ElementViewTemplate<ToggleButton>;
 
+/**
+ * A Tooltip Custom HTML Element.
+ * Based on ARIA APG Tooltip Pattern {@link https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/ }
+ * @public
+ */
+export declare class Tooltip extends FASTElement {
+    /**
+     * The attached element internals
+     */
+    elementInternals: ElementInternals;
+    /**
+     * The item ID
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: id
+     */
+    id: string;
+    /**
+     * Set the delay for the tooltip
+     */
+    delay?: number;
+    /**
+     * The default delay for the tooltip
+     * @internal
+     */
+    private defaultDelay;
+    /**
+     * Set the positioning of the tooltip
+     */
+    positioning?: TooltipPositioningOption;
+    /**
+     * The id of the anchor element for the tooltip
+     */
+    anchor: string;
+    /**
+     * Reference to the anchor element
+     * @internal
+     */
+    private get anchorElement();
+    /**
+     * Reference to the anchor positioning style element
+     * @internal
+     */
+    protected anchorPositioningStyleElement: HTMLStyleElement | null;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Shows the tooltip
+     * @param delay Number of milliseconds to delay showing the tooltip
+     * @internal
+     */
+    showTooltip(delay?: number): void;
+    /**
+     * Hide the tooltip
+     * @param delay Number of milliseconds to delay hiding the tooltip
+     * @internal
+     */
+    hideTooltip(delay?: number): void;
+    /**
+     * Show the tooltip on mouse enter
+     */
+    mouseenterAnchorHandler: () => void;
+    /**
+     * Hide the tooltip on mouse leave
+     */
+    mouseleaveAnchorHandler: () => void;
+    /**
+     * Show the tooltip on focus
+     */
+    focusAnchorHandler: () => void;
+    /**
+     * Hide the tooltip on blur
+     */
+    blurAnchorHandler: () => void;
+}
+
+/**
+ * The {@link Tooltip } custom element definition.
+ *
+ * @public
+ * @remarks
+ * HTML Element: `<fluent-tooltip>`
+ */
+export declare const TooltipDefinition: FASTElementDefinition<typeof Tooltip>;
+
+/**
+ * The TooltipPositioning options and their corresponding CSS values
+ * @public
+ */
+export declare const TooltipPositioningOption: {
+    readonly 'above-start': "block-start span-inline-end";
+    readonly above: "block-start";
+    readonly 'above-end': "block-start span-inline-start";
+    readonly 'below-start': "block-end span-inline-end";
+    readonly below: "block-end";
+    readonly 'below-end': "block-end span-inline-start";
+    readonly 'before-top': "inline-start span-block-end";
+    readonly before: "inline-start";
+    readonly 'before-bottom': "inline-start span-block-start";
+    readonly 'after-top': "inline-end span-block-end";
+    readonly after: "inline-end";
+    readonly 'after-bottom': "inline-end span-block-start";
+};
+
+/**
+ * The TooltipPositioning type
+ * @public
+ */
+export declare type TooltipPositioningOption = ValuesOf<typeof TooltipPositioningOption>;
+
+/**
+ * Styles for the tooltip component
+ * @public
+ */
+export declare const TooltipStyles: ElementStyles;
+
+/**
+ * Template for the tooltip component
+ * @public
+ */
+export declare const TooltipTemplate: ViewTemplate<Tooltip, any>;
+
 export declare const typographyBody1StrongerStyles: CSSDirective;
 
 export declare const typographyBody1StrongStyles: CSSDirective;