@fluentui/react-tooltip 0.0.0-nightly-20220302-0405.1

package/LICENSE

@@ -0,0 +1,15 @@
+@fluentui/react-tooltip
+
+Copyright (c) Microsoft Corporation
+
+All rights reserved.
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+Note: Usage of the fonts and icons referenced in Fluent UI React is subject to the terms listed at https://aka.ms/fluentui-assets-license

package/MIGRATION.md

@@ -0,0 +1,68 @@
+# Tooltip Migration
+
+## STATUS: WIP 🚧
+
+This Migration guide is a work in progress and is not yet ready for use.
+
+## Migration from v8
+
+TooltipHost is replaced by Tooltip itself, as the wrapper around the element that should receive a tooltip.
+
+- `Tooltip`
+  - `calloutProps`
+    - `isBeakVisible` => `withArrow`
+    - `beakWidth` => Not supported.
+    - `gapSpace` => Not supported.
+    - `doNotLayer` => Not supported. Tooltips are always layered by rendering in a Portal.
+    - `setInitialFocus` => Not supported. Tooltips can't be focused, by design.
+  - `componentRef` => Not supported. Tooltips can be controlled declaratively with props like `visible`, instead of using an imperative API like `componentRef`.
+  - `delay` => `showDelay`
+  - `directionalHint` => `positioning`
+    - `topLeftEdge` => `positioning="above-start"`
+    - `topCenter` => `positioning="above"`
+    - `topRightEdge` => `positioning="above-end"`
+    - `topAutoEdge` => Not supported
+    - `bottomLeftEdge` => `positioning="below-start"`
+    - `bottomCenter` => `positioning="below"`
+    - `bottomRightEdge` => `positioning="below-end"`
+    - `bottomAutoEdge` => Not supported
+    - `leftTopEdge` => `positioning="before-top"`
+    - `leftCenter` => `positioning="before"`
+    - `leftBottomEdge` => `positioning="before-bottom"`
+    - `rightTopEdge` => `positioning="after-top"`
+    - `rightCenter` => `positioning="after"`
+    - `rightBottomEdge` => `positioning="after-bottom"`
+  - `directionalHintForRTL` => Automatic based on whether the element is in an RTL context according to `FluentProvider`.
+  - `maxWidth` => Supported only through CSS styling of the `content` slot.
+  - `onRenderContent` => Set the `content` slot to a custom render function.
+- `TooltipHost` => The tooltip itself is the "host".
+  - `closeDelay` => `hideDelay`
+  - `hostClassName` => Not needed because there is no element rendered inline by Tooltip
+  - `onTooltipToggle` => `onVisibleChange`
+  - `overflowMode` => Not supported. If this behavior is needed, the tooltip's visibility can be controlled using the `visible` prop and `onVisibleChange` event.
+
+## Migration from v0
+
+The v9 Tooltip swaps the meaning of children between content and trigger. In v0, Tooltip's children is the tooltip content, and its trigger is a prop. In v9, that is swapped: Tooltip's children is the trigger, and its content is a prop.
+
+- `Tooltip`
+  - children => `content`
+  - `trigger` => children
+  - `defaultOpen` => Not supported. The tooltip's visibility can be controlled using the `visible` prop and `onVisibleChange` event.
+  - `mountNode` => Not supported
+  - `open` => `visible`
+  - `onOpenChange` => `onVisibleChange`
+  - `pointing` => `withArrow`
+  - `mouseEnterDelay` => `showDelay`
+  - `mouseLeaveDelay` => `hideDelay`
+  - `subtle={true}` = `appearance="normal"` (default)
+  - `subtle={false}` => `appearance="inverted"`
+  - Positioning props are now attributes of the `positioning` prop:
+    - `flipBoundary` => `positioning.flipBoundary`
+    - `offset` => `positioning.offset`
+    - `overflowBoundary` => `positioning.overflowBoundary`
+    - `popperRef` => `positioning.popperRef`
+    - `position` => `positioning.position`
+    - `align` => `positioning.align`
+    - `positionFixed` => `positioning.positionFixed`
+    - `target` => `positioning.target`

package/README.md

@@ -0,0 +1,5 @@
+# @fluentui/react-tooltip
+
+**React Tooltip components for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**
+
+These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.

package/Spec.md

@@ -0,0 +1,374 @@
+# Tooltip Spec
+
+Tooltips provide additional information about an element when hovering or focusing on the element.
+
+## Prior Art
+
+- OpenUI Tooltip resarch: https://open-ui.org/components/tooltip.research
+- GitHub Epic issue: [Tooltip Convergence #16735](https://github.com/microsoft/fluentui/issues/16735)
+
+### Tooltips in v8/Fabric
+
+v8 tooltips use a `TooltipHost` wrapped around the target element to provide tooltip functionality. This creates a `div` around the element that listens for mouse and focus events.
+
+The `Tooltip` component renders as a `Callout`, and supports all `Callout` props.
+
+```tsx
+<TooltipHost
+  content="This is the tooltip content"
+  // This id is used on the tooltip itself, not the host
+  // (so an element with this id only exists when the tooltip is shown)
+  id={tooltipId}
+  calloutProps={calloutProps}
+  styles={hostStyles}
+>
+  <DefaultButton aria-describedby={tooltipId}>Hover over me</DefaultButton>
+</TooltipHost>
+```
+
+#### Drawbacks
+
+There are a few drawbacks with this approach to adding tooltips, which are outlined in [☂ Tooltip: open issues to resolve in converged approach #15102](https://github.com/microsoft/fluentui/issues/15102), and summarized below:
+
+- The wrapper `div` created by `TooltipHost` can cause layout issues for the component. It also doesn't always result in proper positioning for the tooltip.
+- The API is overly complex.
+- There's no coordination between tooltips on a page. For example, moving the mouse between two elements with tooltips should cause the second tooltip to appear immediately without fading in/out.
+
+### Tooltips in v0/Northstar
+
+v0 tooltips use a `trigger` property to render the tooltip's target component. However, unlike v8 it does not create a wrapper `div` around the target component, but instead adds listeners to the target component's props.
+
+```tsx
+<Tooltip content="Example tooltip" trigger={<Button content="A button" />} />
+```
+
+# Sample Code
+
+Label tooltip for an icon-only button:
+
+```tsx
+<Tooltip content="Copy" relationship="label">
+  <Button icon={<CopyRegular />} />
+</Tooltip>
+```
+
+Description tooltip for a link:
+
+```tsx
+<Tooltip content="This is an example" relationship="description">
+  <a href="http://example.com">A link</a>
+</Tooltip>
+```
+
+Tooltip with custom JSX content:
+
+```tsx
+<Tooltip content={<b>The content can be JSX</b>} relationship="label">
+  <Button />
+</Tooltip>
+```
+
+Custom component as a trigger:
+
+```tsx
+<Tooltip content="Supports any component that accepts HTML attributes" relationship="label">
+  <FancyButton />
+</Tooltip>
+```
+
+Render function for the trigger:
+
+```tsx
+<Tooltip content="The child can be a render function" relationship="description">
+  {triggerProps => (
+    <>
+      <div>
+        <button {...triggerProps}>The trigger element</button>
+      </div>
+    </>
+  )}
+</Tooltip>
+```
+
+```tsx
+<Tooltip
+  content="It can target an element other than its trigger"
+  relationship="description"
+  positioning={{ target: targetElement }}
+>
+  <button>
+    Custom target: <div ref={setTargetElement} />
+  </button>
+</Tooltip>
+```
+
+# Variants
+
+- The tooltip supports higher contrast colors with `appearance="inverted"`.
+- The tooltip supports rendering an arrow pointing to the target element, using `withArrow`.
+
+# API
+
+To attach a tooltip to an element, wrap it with a `Tooltip`. There is a `content` slot for the text of the tooltip itself.
+
+Unlike most components, Tooltip doesn't have a root slot and doesn't allow native DOM props on the Tooltip itself. This is because it doesn't render any nodes inline around its trigger (it does _not_ wrap the element with a `<div>` for example). Instead, it attaches listeners to the child by cloning the JSX object and adding `onPointerEnter`, etc. listeners.
+
+Tooltip only supports a single child element, which can be either:
+
+- A native element or component that supports DOM attributes (the child can't be a string, for example).
+- A render function that takes the extra props to be added to the trigger element.
+- It is allowed to have a tooltip without a child (trigger) element, in which case it _must_ have a target set via the `positioning` prop, and its visibility must be controlled with the `visible` prop.
+
+_A note about the terminology used for the elements that the tooltip is attached to:_
+
+- _The **trigger** is the element that causes the tooltip to open._
+- _The **target** is the element that the tooltip is anchored to (and the arrow points to)._
+- _Almost always, these will both be the same element, but it is possible to specify them separately, so the tooltip can show up adjacent to a different element than the one that triggered it._
+
+## Types
+
+### `Tooltip`
+
+From [Tooltip.types.tsx](https://github.com/microsoft/fluentui/blob/master/packages/react-tooltip/src/components/Tooltip/Tooltip.types.tsx) in `@fluentui/react-tooltip`:
+
+```ts
+/**
+ * Slot properties for Tooltip
+ */
+export type TooltipSlots = {
+  /**
+   * The text or JSX content of the tooltip.
+   */
+  content: NonNullable<Slot<'div'>>;
+};
+
+/**
+ * Properties for Tooltip
+ */
+export type TooltipProps = ComponentProps<TooltipSlots> & {
+  /**
+   * (Required) Specifies whether this tooltip is acting as the description or label of its trigger element.
+   *
+   * * `label` - The tooltip sets the trigger's aria-label or aria-labelledby attribute. This is useful for buttons
+   *    displaying only an icon, for example.
+   * * `description` - The tooltip sets the trigger's aria-description or aria-describedby attribute.
+   * * `inaccessible` - No aria attributes are set on the trigger. This makes the tooltip's content inaccessible to
+   *   screen readers, and should only be used if the tooltip's text is available by some other means.
+   */
+  relationship: 'label' | 'description' | 'inaccessible';
+
+  /**
+   * The tooltip can have a single JSX child, or a render function that accepts TooltipTriggerProps.
+   *
+   * If no child is provided, the tooltip's target must be set with the `positioning` prop, and its
+   * visibility must be controlled with the `visible` prop.
+   */
+  children?:
+    | (React.ReactElement & { ref?: React.Ref<unknown> })
+    | ((props: TooltipTriggerProps) => React.ReactElement | null)
+    | null;
+
+  /**
+   * The tooltip's visual appearance.
+   * * `normal` - Uses the theme's background and text colors.
+   * * `inverted` - Higher contrast variant that uses the theme's inverted colors.
+   *
+   * @defaultvalue normal
+   */
+  appearance?: 'normal' | 'inverted';
+
+  /**
+   * Render an arrow pointing to the target element
+   *
+   * @defaultvalue false
+   */
+  withArrow?: boolean;
+
+  /**
+   * Configure the positioning of the tooltip
+   *
+   * @defaultvalue above
+   */
+  positioning?: PositioningShorthand;
+
+  /**
+   * Control the tooltip's visibility programatically.
+   *
+   * This can be used in conjunction with onVisibleChange to modify the tooltip's show and hide behavior.
+   *
+   * If not provided, the visibility will be controlled by the tooltip itself, based on hover and focus events on the
+   * trigger (child) element.
+   */
+  visible?: boolean;
+
+  /**
+   * Notification when the visibility of the tooltip is changing
+   */
+  onVisibleChange?: (
+    event: React.PointerEvent<HTMLElement> | React.FocusEvent<HTMLElement> | undefined,
+    data: OnVisibleChangeData,
+  ) => void;
+
+  /**
+   * Delay before the tooltip is shown, in milliseconds.
+   *
+   * @defaultvalue 250
+   */
+  showDelay?: number;
+
+  /**
+   * Delay before the tooltip is hidden, in milliseconds.
+   *
+   * @defaultvalue 250
+   */
+  hideDelay?: number;
+};
+
+/**
+ * The properties that are added to the trigger of the Tooltip
+ */
+export type TooltipTriggerProps = {
+  ref?: React.Ref<never>;
+} & Pick<
+  React.HTMLAttributes<HTMLElement>,
+  'onPointerEnter' | 'onPointerLeave' | 'onFocus' | 'onBlur' | 'aria-describedby' | 'aria-labelledby' | 'aria-label'
+>;
+
+/**
+ * Data for the Tooltip's onVisibleChange event.
+ */
+export type OnVisibleChangeData = {
+  visible: boolean;
+};
+```
+
+### `TooltipContext`
+
+The context is included at the app root on `FluentProvider` and is used by `Tooltip` to ensure that only one is visible at once.
+
+From [TooltipContext.ts](https://github.com/microsoft/fluentui/blob/master/packages/react-shared-contexts/src/TooltipContext/TooltipContext.ts) in `@fluentui/react-shared-contexts`:
+
+```ts
+/**
+ * The context provided by TooltipProvider
+ */
+export type TooltipContextType = {
+  /**
+   * When a tooltip is shown, it sets itself as the visibleTooltip.
+   * The next tooltip to become visible can use it to hide the previous tooltip immediately.
+   */
+  visibleTooltip?: {
+    hide: () => void;
+  };
+};
+
+/**
+ * Context shared by all of the tooltips in the app
+ */
+export const TooltipContext = React.createContext<TooltipContextType>({});
+```
+
+# Structure
+
+## Tooltip as a label
+
+### JSX tree
+
+```tsx
+<Tooltip content="Example" relationship="label">
+  <button>
+    <svg>...</svg>
+  </button>
+</Tooltip>
+```
+
+### DOM
+
+Tooltip with `relationship="label"` is not rendered when it is not visible. Its content is used as the `aria-label` of the control. The Tooltip will be rendered once it is visible; see the next example for what the DOM structure looks like in that case.
+
+```html
+<body>
+  <!-- App root -->
+  <div>
+    <button aria-label="Example" onPointerEnter="{...}" onPointerLeave="{...}" onFocus="{...}" onBlur="{...}">
+      <svg>...</svg>
+    </button>
+  </div>
+</body>
+```
+
+## Tooltip as a description
+
+### JSX tree
+
+```tsx
+<Tooltip content="Example description of the button" relationship="description" withArrow>
+  <button>The Button</button>
+</Tooltip>
+```
+
+### DOM
+
+Tooltip with `relationship="description"` is always rendered because it's used as the `aria-describedby` of the control, which always has to point to a valid DOM element even if it's not visible.
+
+```html
+<body>
+  <!-- App root -->
+  <div>
+    <button aria-describedby="tooltip-2" onPointerEnter="{...}" onPointerLeave="{...}" onFocus="{...}" onBlur="{...}">
+      The Button
+    </button>
+  </div>
+
+  <!-- Portal for Tooltip -->
+  <div>
+    <div role="tooltip" id="tooltip-2" class="{tooltip}">
+      <div class="{arrow}"></div>
+      Example description of the button
+    </div>
+  </div>
+</body>
+```
+
+# Migration
+
+See [MIGRATION.md](./MIGRATION.md).
+
+# Behaviors
+
+## Visibility
+
+- The tooltip shows:
+  - After `showDelay` (250ms default) from when the mouse/pointer enters the trigger.
+  - After `showDelay` (250ms default) from when the trigger gets keyboard focus.
+  - _Immediately_ (ignoring `showDelay`) if it is triggered while another tooltip is currently visible.
+- The tooltip hides:
+  - After `hideDelay` (250ms default) from when the mouse/pointer leaves BOTH the trigger AND the tooltip itself.
+  - _Immediately_ when the trigger loses keyboard focus.
+  - _Immediately_ when the ESC key is pressed.
+  - _Immediately_ when another tooltip is shown.
+
+There is only ever one tooltip visible at once (coordinated using `TooltipContext`). If another tooltip is triggered while there's one currently visible, the previous one hides and the new one shows immediately, without delay.
+
+### Placement
+
+The tooltip is placed relative to its target element based on the `positioning` prop. The placement is handled by the `@fluentui/react-positioning` package, which uses PopperJS.
+
+### Focus
+
+Content within the tooltip is not focusable, and can't be interacted with directly by keyboard or mouse.
+
+# Accessibility
+
+- ARIA design pattern: https://www.w3.org/TR/wai-aria-practices-1.2/#tooltip.
+- The Tooltip content element has `role="tooltip"`.
+- If Tooltip has `relationship="label"` with simple string content:
+  - The content is set as the trigger's `aria-label`.
+  - The tooltip is only rendered while it is visible.
+- If Tooltip has `relationship="label"` with JSX content, OR `relationship="description"` (string or JSX):
+  - The tooltip's ID is set as the trigger's `aria-labelledby` or `aria-describedby` (an ID is generated if not provided).
+  - The tooltip is always rendered, even while hidden.
+  - While hidden, the tooltip itself is styled with `display: none`.
+- The Tooltip itself can never receive focus.
+- The Tooltip should never contain focusable elements.
+- The trigger for the Tooltip should be focusable.

package/dist/react-tooltip.d.ts

@@ -0,0 +1,154 @@
+import type { ComponentProps } from '@fluentui/react-utilities';
+import type { ComponentState } from '@fluentui/react-utilities';
+import type { FluentTriggerComponent } from '@fluentui/react-utilities';
+import type { PositioningShorthand } from '@fluentui/react-positioning';
+import * as React_2 from 'react';
+import type { Slot } from '@fluentui/react-utilities';
+
+/**
+ * Data for the Tooltip's onVisibleChange event.
+ */
+export declare type OnVisibleChangeData = {
+    visible: boolean;
+};
+
+/**
+ * Render the final JSX of Tooltip
+ */
+export declare const renderTooltip_unstable: (state: TooltipState) => JSX.Element;
+
+/**
+ * A tooltip provides light weight contextual information on top of its target element.
+ */
+export declare const Tooltip: React_2.FC<TooltipProps> & FluentTriggerComponent;
+
+export declare const tooltipClassName = "fui-Tooltip";
+
+/**
+ * Properties and state for Tooltip
+ */
+declare type TooltipCommons = {
+    /**
+     * (Required) Specifies whether this tooltip is acting as the description or label of its trigger element.
+     *
+     * * `label` - The tooltip sets the trigger's aria-label or aria-labelledby attribute. This is useful for buttons
+     *    displaying only an icon, for example.
+     * * `description` - The tooltip sets the trigger's aria-description or aria-describedby attribute.
+     * * `inaccessible` - No aria attributes are set on the trigger. This makes the tooltip's content inaccessible to
+     *   screen readers, and should only be used if the tooltip's text is available by some other means.
+     */
+    relationship: 'label' | 'description' | 'inaccessible';
+    /**
+     * The tooltip's visual appearance.
+     * * `normal` - Uses the theme's background and text colors.
+     * * `inverted` - Higher contrast variant that uses the theme's inverted colors.
+     *
+     * @defaultvalue normal
+     */
+    appearance?: 'normal' | 'inverted';
+    /**
+     * Render an arrow pointing to the target element
+     *
+     * @defaultvalue false
+     */
+    withArrow?: boolean;
+    /**
+     * Configure the positioning of the tooltip
+     *
+     * @defaultvalue above
+     */
+    positioning?: PositioningShorthand;
+    /**
+     * Control the tooltip's visibility programatically.
+     *
+     * This can be used in conjunction with onVisibleChange to modify the tooltip's show and hide behavior.
+     *
+     * If not provided, the visibility will be controlled by the tooltip itself, based on hover and focus events on the
+     * trigger (child) element.
+     */
+    visible?: boolean;
+    /**
+     * Notification when the visibility of the tooltip is changing
+     */
+    onVisibleChange?: (event: React_2.PointerEvent<HTMLElement> | React_2.FocusEvent<HTMLElement> | undefined, data: OnVisibleChangeData) => void;
+    /**
+     * Delay before the tooltip is shown, in milliseconds.
+     *
+     * @defaultvalue 250
+     */
+    showDelay: number;
+    /**
+     * Delay before the tooltip is hidden, in milliseconds.
+     *
+     * @defaultvalue 250
+     */
+    hideDelay: number;
+};
+
+/**
+ * Properties for Tooltip
+ */
+export declare type TooltipProps = ComponentProps<TooltipSlots> & Partial<Omit<TooltipCommons, 'relationship'>> & Pick<TooltipCommons, 'relationship'> & {
+    /**
+     * The tooltip can have a single JSX child, or a render function that accepts TooltipTriggerProps.
+     *
+     * If no child is provided, the tooltip's target must be set with the `positioning` prop, and its
+     * visibility must be controlled with the `visible` prop.
+     */
+    children?: (React_2.ReactElement & {
+        ref?: React_2.Ref<unknown>;
+    }) | ((props: TooltipTriggerProps) => React_2.ReactElement | null) | null;
+};
+
+/**
+ * Slot properties for Tooltip
+ */
+export declare type TooltipSlots = {
+    /**
+     * The text or JSX content of the tooltip.
+     */
+    content: NonNullable<Slot<'div'>>;
+};
+
+/**
+ * State used in rendering Tooltip
+ */
+export declare type TooltipState = ComponentState<TooltipSlots> & TooltipCommons & {
+    children?: React_2.ReactElement | null;
+    /**
+     * Whether the tooltip should be rendered to the DOM.
+     */
+    shouldRenderTooltip?: boolean;
+    /**
+     * Ref to the arrow element
+     */
+    arrowRef?: React_2.Ref<HTMLDivElement>;
+    /**
+     * CSS class for the arrow element
+     */
+    arrowClassName?: string;
+};
+
+/**
+ * The properties that are added to the trigger of the Tooltip
+ */
+export declare type TooltipTriggerProps = {
+    ref?: React_2.Ref<never>;
+} & Pick<React_2.HTMLAttributes<HTMLElement>, 'onPointerEnter' | 'onPointerLeave' | 'onFocus' | 'onBlur' | 'aria-describedby' | 'aria-labelledby' | 'aria-label'>;
+
+/**
+ * Create the state required to render Tooltip.
+ *
+ * The returned state can be modified with hooks such as useTooltipStyles_unstable,
+ * before being passed to renderTooltip_unstable.
+ *
+ * @param props - props from this instance of Tooltip
+ */
+export declare const useTooltip_unstable: (props: TooltipProps) => TooltipState;
+
+/**
+ * Apply styling to the Tooltip slots based on the state
+ */
+export declare const useTooltipStyles_unstable: (state: TooltipState) => TooltipState;
+
+export { }

package/lib/Tooltip.d.ts

@@ -0,0 +1 @@
+export * from './components/Tooltip/index';

package/lib/Tooltip.js

@@ -0,0 +1,2 @@
+export * from './components/Tooltip/index';
+//# sourceMappingURL=Tooltip.js.map

package/lib/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","sourceRoot":"../src/","sources":["Tooltip.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC","sourcesContent":["export * from './components/Tooltip/index';\n"]}

package/lib/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import type { TooltipProps } from './Tooltip.types';
+import type { FluentTriggerComponent } from '@fluentui/react-utilities';
+/**
+ * A tooltip provides light weight contextual information on top of its target element.
+ */
+export declare const Tooltip: React.FC<TooltipProps> & FluentTriggerComponent;

package/lib/components/Tooltip/Tooltip.js

@@ -0,0 +1,15 @@
+import { useTooltip_unstable } from './useTooltip';
+import { renderTooltip_unstable } from './renderTooltip';
+import { useTooltipStyles_unstable } from './useTooltipStyles';
+/**
+ * A tooltip provides light weight contextual information on top of its target element.
+ */
+
+export const Tooltip = props => {
+  const state = useTooltip_unstable(props);
+  useTooltipStyles_unstable(state);
+  return renderTooltip_unstable(state);
+};
+Tooltip.displayName = 'Tooltip';
+Tooltip.isFluentTriggerComponent = true;
+//# sourceMappingURL=Tooltip.js.map

package/lib/components/Tooltip/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AACA,SAAS,mBAAT,QAAoC,cAApC;AACA,SAAS,sBAAT,QAAuC,iBAAvC;AACA,SAAS,yBAAT,QAA0C,oBAA1C;AAIA;;AAEG;;AACH,OAAO,MAAM,OAAO,GAAoD,KAAK,IAAG;AAC9E,QAAM,KAAK,GAAG,mBAAmB,CAAC,KAAD,CAAjC;AAEA,EAAA,yBAAyB,CAAC,KAAD,CAAzB;AACA,SAAO,sBAAsB,CAAC,KAAD,CAA7B;AACD,CALM;AAOP,OAAO,CAAC,WAAR,GAAsB,SAAtB;AACA,OAAO,CAAC,wBAAR,GAAmC,IAAnC","sourcesContent":["import * as React from 'react';\nimport { useTooltip_unstable } from './useTooltip';\nimport { renderTooltip_unstable } from './renderTooltip';\nimport { useTooltipStyles_unstable } from './useTooltipStyles';\nimport type { TooltipProps } from './Tooltip.types';\nimport type { FluentTriggerComponent } from '@fluentui/react-utilities';\n\n/**\n * A tooltip provides light weight contextual information on top of its target element.\n */\nexport const Tooltip: React.FC<TooltipProps> & FluentTriggerComponent = props => {\n  const state = useTooltip_unstable(props);\n\n  useTooltipStyles_unstable(state);\n  return renderTooltip_unstable(state);\n};\n\nTooltip.displayName = 'Tooltip';\nTooltip.isFluentTriggerComponent = true;\n"],"sourceRoot":"../src/"}