@fluentui-react-native/tooltip 0.2.0

package/.eslintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ['@fluentui-react-native/eslint-config-rules'],
+};

package/CHANGELOG.json

@@ -0,0 +1,20 @@
+{
+  "name": "@fluentui-react-native/tooltip",
+  "entries": [
+    {
+      "date": "Thu, 30 Nov 2023 21:39:48 GMT",
+      "version": "0.2.0",
+      "tag": "@fluentui-react-native/tooltip_v0.2.0",
+      "comments": {
+        "minor": [
+          {
+            "author": "gulnazsayed@microsoft.com",
+            "package": "@fluentui-react-native/tooltip",
+            "commit": "b5a9fdefb58572ac6976e682563a190cb8a644b7",
+            "comment": "adding new package"
+          }
+        ]
+      }
+    }
+  ]
+}

package/CHANGELOG.md

@@ -0,0 +1,13 @@
+# Change Log - @fluentui-react-native/tooltip
+
+This log was last generated on Thu, 30 Nov 2023 21:39:48 GMT and should not be manually modified.
+
+<!-- Start content -->
+
+## 0.2.0
+
+Thu, 30 Nov 2023 21:39:48 GMT
+
+### Minor changes
+
+- adding new package (gulnazsayed@microsoft.com)

package/SPEC.md

@@ -0,0 +1,5 @@
+# Tooltip
+
+## Background
+
+Please write here you documentation...

package/babel.config.js

@@ -0,0 +1 @@
+module.exports = require('@fluentui-react-native/scripts/babel.config');

package/jest.config.js

@@ -0,0 +1,2 @@
+const { configureReactNativeJest } = require('@fluentui-react-native/scripts');
+module.exports = configureReactNativeJest('win32');

package/just.config.js

@@ -0,0 +1,3 @@
+const { preset } = require('@fluentui-react-native/scripts');
+
+preset();

package/lib/Tooltip.d.ts

@@ -0,0 +1,12 @@
+import type { TooltipProps } from './Tooltip.types';
+/**
+ * A function which determines if a set of styles should be applied to the component given the current state and props of the tooltip.
+ *
+ * @param layer The name of the state that is being checked for
+ * @param userProps The props that were passed into the tooltip
+ * @returns Whether the styles that are assigned to the layer should be applied to the tooltip
+ */
+export declare const tooltipLookup: (layer: string, userProps: TooltipProps) => boolean;
+export declare const Tooltip: import("@fluentui-react-native/framework").ComposableFunction<TooltipProps>;
+export default Tooltip;
+//# sourceMappingURL=Tooltip.d.ts.map

package/lib/Tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../src/Tooltip.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAKpD;;;;;;GAMG;AACH,eAAO,MAAM,aAAa,UAAW,MAAM,aAAa,YAAY,KAAG,OAEtE,CAAC;AAEF,eAAO,MAAM,OAAO,6EAIlB,CAAC;AAIH,eAAe,OAAO,CAAC"}

package/lib/Tooltip.js

@@ -0,0 +1,25 @@
+import { __assign } from "tslib";
+/** @jsxRuntime classic */
+import * as React from 'react';
+import { ensureNativeComponent } from '@fluentui-react-native/component-cache';
+import { mergeProps, stagedComponent } from '@fluentui-react-native/framework';
+import { tooltipName } from './Tooltip.types';
+var NativeTooltipView = ensureNativeComponent('RCTTooltip');
+/**
+ * A function which determines if a set of styles should be applied to the component given the current state and props of the tooltip.
+ *
+ * @param layer The name of the state that is being checked for
+ * @param userProps The props that were passed into the tooltip
+ * @returns Whether the styles that are assigned to the layer should be applied to the tooltip
+ */
+export var tooltipLookup = function (layer, userProps) {
+    return userProps[layer];
+};
+export var Tooltip = stagedComponent(function (props) {
+    return function (rest, children) {
+        return React.createElement(NativeTooltipView, __assign({}, mergeProps(props, rest)), children);
+    };
+});
+Tooltip.displayName = tooltipName;
+export default Tooltip;
+//# sourceMappingURL=Tooltip.js.map

package/lib/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../src/Tooltip.tsx"],"names":[],"mappings":";AAAA,0BAA0B;AAC1B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,qBAAqB,EAAE,MAAM,wCAAwC,CAAC;AAC/E,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AAG/E,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C,IAAM,iBAAiB,GAAG,qBAAqB,CAAC,YAAY,CAAC,CAAC;AAE9D;;;;;;GAMG;AACH,MAAM,CAAC,IAAM,aAAa,GAAG,UAAC,KAAa,EAAE,SAAuB;IAClE,OAAO,SAAS,CAAC,KAAK,CAAC,CAAC;AAC1B,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,OAAO,GAAG,eAAe,CAAC,UAAC,KAAmB;IACzD,OAAO,UAAC,IAAkB,EAAE,QAAyB;QACnD,OAAO,oBAAC,iBAAiB,eAAK,UAAU,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,QAAQ,CAAqB,CAAC;IACxF,CAAC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,OAAO,CAAC,WAAW,GAAG,WAAW,CAAC;AAElC,eAAe,OAAO,CAAC"}

package/lib/Tooltip.types.d.ts

@@ -0,0 +1,45 @@
+import type * as React from 'react';
+import type { ViewStyle } from 'react-native';
+import type { DirectionalHint } from '@fluentui-react-native/callout';
+export declare const tooltipName = "Tooltip";
+export type TooltipProps = React.PropsWithChildren<{
+    /**
+     * The text of the tooltip.
+     */
+    content: string;
+    /**
+     * Notification when the visibility of the tooltip is changed.
+     */
+    onVisibleChange?: (event: any, data: any) => void;
+    /**
+     * Positioning of the tooltip relative to the target element.
+     *
+     * @default topCenter
+     */
+    positioning?: DirectionalHint;
+    /**
+     * Allow consumers to pass in Style props
+     */
+    style?: ViewStyle;
+    /**
+     * Target anchor that tooltip uses for relative positioning. Certain components may proffer a string as an anchor target, such as
+     * anchoring to a point inside the component.
+     *
+     * If not provided, will anchor to the wrapper element.
+     */
+    target?: React.RefObject<React.Component> | string;
+    /**
+     * Controls the tooltip visibility and can be used in conjunction with onVisibleChange to modify show/hide behavior. If not provided, will be updated based on hover/focus events on target element.
+     *
+     * @default false
+     */
+    visible?: boolean;
+}>;
+export interface TooltipSlotProps {
+    root: TooltipProps;
+}
+export interface TooltipType {
+    props: TooltipProps;
+    slotProps: TooltipSlotProps;
+}
+//# sourceMappingURL=Tooltip.types.d.ts.map

package/lib/Tooltip.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.types.d.ts","sourceRoot":"","sources":["../src/Tooltip.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AAEtE,eAAO,MAAM,WAAW,YAAY,CAAC;AAErC,MAAM,MAAM,YAAY,GAAG,KAAK,CAAC,iBAAiB,CAAC;IACjD;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,KAAK,KAAA,EAAE,IAAI,KAAA,KAAK,IAAI,CAAC;IAExC;;;;OAIG;IACH,WAAW,CAAC,EAAE,eAAe,CAAC;IAE9B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,CAAC,GAAG,MAAM,CAAC;IAEnD;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC,CAAC;AAEH,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,YAAY,CAAC;CACpB;AAED,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,YAAY,CAAC;IACpB,SAAS,EAAE,gBAAgB,CAAC;CAC7B"}

package/lib/Tooltip.types.js

@@ -0,0 +1,2 @@
+export var tooltipName = 'Tooltip';
+//# sourceMappingURL=Tooltip.types.js.map

package/lib/Tooltip.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.types.js","sourceRoot":"","sources":["../src/Tooltip.types.ts"],"names":[],"mappings":"AAKA,MAAM,CAAC,IAAM,WAAW,GAAG,SAAS,CAAC"}

package/lib/__tests__/Tooltip.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Tooltip.test.d.ts.map

package/lib/__tests__/Tooltip.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.test.d.ts","sourceRoot":"","sources":["../../src/__tests__/Tooltip.test.tsx"],"names":[],"mappings":""}

package/lib/__tests__/Tooltip.test.js

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { ButtonV1 } from '@fluentui-react-native/button';
+import { checkRenderConsistency, checkReRender } from '@fluentui-react-native/test-tools';
+import * as renderer from 'react-test-renderer';
+import { Tooltip } from '../Tooltip';
+describe('Tooltip component tests', function () {
+    it('Tooltip default', function () {
+        var tree = renderer
+            .create(React.createElement(Tooltip, { content: "Your component" },
+            React.createElement(ButtonV1, null, "Your component")))
+            .toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+    it('Tooltip simple rendering does not invalidate styling', function () {
+        checkRenderConsistency(function () { return (React.createElement(Tooltip, { content: "Default Tooltip" },
+            React.createElement(ButtonV1, null, "Default Tooltip"))); }, 2);
+    });
+    it('Tooltip re-renders correctly', function () {
+        checkReRender(function () { return (React.createElement(Tooltip, { content: "Render twice" },
+            React.createElement(ButtonV1, null, "Render twice"))); }, 2);
+    });
+    // Feel free to add more tests here
+});
+//# sourceMappingURL=Tooltip.test.js.map

package/lib/__tests__/Tooltip.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.test.js","sourceRoot":"","sources":["../../src/__tests__/Tooltip.test.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AACzD,OAAO,EAAE,sBAAsB,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAC1F,OAAO,KAAK,QAAQ,MAAM,qBAAqB,CAAC;AAEhD,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAErC,QAAQ,CAAC,yBAAyB,EAAE;IAClC,EAAE,CAAC,iBAAiB,EAAE;QACpB,IAAM,IAAI,GAAG,QAAQ;aAClB,MAAM,CACL,oBAAC,OAAO,IAAC,OAAO,EAAC,gBAAgB;YAC/B,oBAAC,QAAQ,yBAA0B,CAC3B,CACX;aACA,MAAM,EAAE,CAAC;QACZ,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,sDAAsD,EAAE;QACzD,sBAAsB,CACpB,cAAM,OAAA,CACJ,oBAAC,OAAO,IAAC,OAAO,EAAC,iBAAiB;YAChC,oBAAC,QAAQ,0BAA2B,CAC5B,CACX,EAJK,CAIL,EACD,CAAC,CACF,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,8BAA8B,EAAE;QACjC,aAAa,CACX,cAAM,OAAA,CACJ,oBAAC,OAAO,IAAC,OAAO,EAAC,cAAc;YAC7B,oBAAC,QAAQ,uBAAwB,CACzB,CACX,EAJK,CAIL,EACD,CAAC,CACF,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,mCAAmC;AACrC,CAAC,CAAC,CAAC"}

package/lib/index.d.ts

@@ -0,0 +1,4 @@
+export { Tooltip } from './Tooltip';
+export { tooltipName } from './Tooltip.types';
+export type { TooltipProps, TooltipSlotProps, TooltipType } from './Tooltip.types';
+//# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,YAAY,EAAE,YAAY,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC"}

package/lib/index.js

@@ -0,0 +1,3 @@
+export { Tooltip } from './Tooltip';
+export { tooltipName } from './Tooltip.types';
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC"}

package/lib-commonjs/Tooltip.d.ts

@@ -0,0 +1,12 @@
+import type { TooltipProps } from './Tooltip.types';
+/**
+ * A function which determines if a set of styles should be applied to the component given the current state and props of the tooltip.
+ *
+ * @param layer The name of the state that is being checked for
+ * @param userProps The props that were passed into the tooltip
+ * @returns Whether the styles that are assigned to the layer should be applied to the tooltip
+ */
+export declare const tooltipLookup: (layer: string, userProps: TooltipProps) => boolean;
+export declare const Tooltip: import("@fluentui-react-native/framework").ComposableFunction<TooltipProps>;
+export default Tooltip;
+//# sourceMappingURL=Tooltip.d.ts.map

package/lib-commonjs/Tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../src/Tooltip.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAKpD;;;;;;GAMG;AACH,eAAO,MAAM,aAAa,UAAW,MAAM,aAAa,YAAY,KAAG,OAEtE,CAAC;AAEF,eAAO,MAAM,OAAO,6EAIlB,CAAC;AAIH,eAAe,OAAO,CAAC"}

package/lib-commonjs/Tooltip.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tooltip = exports.tooltipLookup = void 0;
+var tslib_1 = require("tslib");
+/** @jsxRuntime classic */
+var React = tslib_1.__importStar(require("react"));
+var component_cache_1 = require("@fluentui-react-native/component-cache");
+var framework_1 = require("@fluentui-react-native/framework");
+var Tooltip_types_1 = require("./Tooltip.types");
+var NativeTooltipView = (0, component_cache_1.ensureNativeComponent)('RCTTooltip');
+/**
+ * A function which determines if a set of styles should be applied to the component given the current state and props of the tooltip.
+ *
+ * @param layer The name of the state that is being checked for
+ * @param userProps The props that were passed into the tooltip
+ * @returns Whether the styles that are assigned to the layer should be applied to the tooltip
+ */
+var tooltipLookup = function (layer, userProps) {
+    return userProps[layer];
+};
+exports.tooltipLookup = tooltipLookup;
+exports.Tooltip = (0, framework_1.stagedComponent)(function (props) {
+    return function (rest, children) {
+        return React.createElement(NativeTooltipView, tslib_1.__assign({}, (0, framework_1.mergeProps)(props, rest)), children);
+    };
+});
+exports.Tooltip.displayName = Tooltip_types_1.tooltipName;
+exports.default = exports.Tooltip;
+//# sourceMappingURL=Tooltip.js.map

package/lib-commonjs/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../src/Tooltip.tsx"],"names":[],"mappings":";;;;AAAA,0BAA0B;AAC1B,mDAA+B;AAE/B,0EAA+E;AAC/E,8DAA+E;AAG/E,iDAA8C;AAE9C,IAAM,iBAAiB,GAAG,IAAA,uCAAqB,EAAC,YAAY,CAAC,CAAC;AAE9D;;;;;;GAMG;AACI,IAAM,aAAa,GAAG,UAAC,KAAa,EAAE,SAAuB;IAClE,OAAO,SAAS,CAAC,KAAK,CAAC,CAAC;AAC1B,CAAC,CAAC;AAFW,QAAA,aAAa,iBAExB;AAEW,QAAA,OAAO,GAAG,IAAA,2BAAe,EAAC,UAAC,KAAmB;IACzD,OAAO,UAAC,IAAkB,EAAE,QAAyB;QACnD,OAAO,oBAAC,iBAAiB,uBAAK,IAAA,sBAAU,EAAC,KAAK,EAAE,IAAI,CAAC,GAAG,QAAQ,CAAqB,CAAC;IACxF,CAAC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAO,CAAC,WAAW,GAAG,2BAAW,CAAC;AAElC,kBAAe,eAAO,CAAC"}

package/lib-commonjs/Tooltip.types.d.ts

@@ -0,0 +1,45 @@
+import type * as React from 'react';
+import type { ViewStyle } from 'react-native';
+import type { DirectionalHint } from '@fluentui-react-native/callout';
+export declare const tooltipName = "Tooltip";
+export type TooltipProps = React.PropsWithChildren<{
+    /**
+     * The text of the tooltip.
+     */
+    content: string;
+    /**
+     * Notification when the visibility of the tooltip is changed.
+     */
+    onVisibleChange?: (event: any, data: any) => void;
+    /**
+     * Positioning of the tooltip relative to the target element.
+     *
+     * @default topCenter
+     */
+    positioning?: DirectionalHint;
+    /**
+     * Allow consumers to pass in Style props
+     */
+    style?: ViewStyle;
+    /**
+     * Target anchor that tooltip uses for relative positioning. Certain components may proffer a string as an anchor target, such as
+     * anchoring to a point inside the component.
+     *
+     * If not provided, will anchor to the wrapper element.
+     */
+    target?: React.RefObject<React.Component> | string;
+    /**
+     * Controls the tooltip visibility and can be used in conjunction with onVisibleChange to modify show/hide behavior. If not provided, will be updated based on hover/focus events on target element.
+     *
+     * @default false
+     */
+    visible?: boolean;
+}>;
+export interface TooltipSlotProps {
+    root: TooltipProps;
+}
+export interface TooltipType {
+    props: TooltipProps;
+    slotProps: TooltipSlotProps;
+}
+//# sourceMappingURL=Tooltip.types.d.ts.map

package/lib-commonjs/Tooltip.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.types.d.ts","sourceRoot":"","sources":["../src/Tooltip.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AAEtE,eAAO,MAAM,WAAW,YAAY,CAAC;AAErC,MAAM,MAAM,YAAY,GAAG,KAAK,CAAC,iBAAiB,CAAC;IACjD;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,KAAK,KAAA,EAAE,IAAI,KAAA,KAAK,IAAI,CAAC;IAExC;;;;OAIG;IACH,WAAW,CAAC,EAAE,eAAe,CAAC;IAE9B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,CAAC,GAAG,MAAM,CAAC;IAEnD;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC,CAAC;AAEH,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,YAAY,CAAC;CACpB;AAED,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,YAAY,CAAC;IACpB,SAAS,EAAE,gBAAgB,CAAC;CAC7B"}

package/lib-commonjs/Tooltip.types.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.tooltipName = void 0;
+exports.tooltipName = 'Tooltip';
+//# sourceMappingURL=Tooltip.types.js.map

package/lib-commonjs/Tooltip.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.types.js","sourceRoot":"","sources":["../src/Tooltip.types.ts"],"names":[],"mappings":";;;AAKa,QAAA,WAAW,GAAG,SAAS,CAAC"}

package/lib-commonjs/__tests__/Tooltip.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Tooltip.test.d.ts.map

package/lib-commonjs/__tests__/Tooltip.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.test.d.ts","sourceRoot":"","sources":["../../src/__tests__/Tooltip.test.tsx"],"names":[],"mappings":""}

package/lib-commonjs/__tests__/Tooltip.test.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var React = tslib_1.__importStar(require("react"));
+var button_1 = require("@fluentui-react-native/button");
+var test_tools_1 = require("@fluentui-react-native/test-tools");
+var renderer = tslib_1.__importStar(require("react-test-renderer"));
+var Tooltip_1 = require("../Tooltip");
+describe('Tooltip component tests', function () {
+    it('Tooltip default', function () {
+        var tree = renderer
+            .create(React.createElement(Tooltip_1.Tooltip, { content: "Your component" },
+            React.createElement(button_1.ButtonV1, null, "Your component")))
+            .toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+    it('Tooltip simple rendering does not invalidate styling', function () {
+        (0, test_tools_1.checkRenderConsistency)(function () { return (React.createElement(Tooltip_1.Tooltip, { content: "Default Tooltip" },
+            React.createElement(button_1.ButtonV1, null, "Default Tooltip"))); }, 2);
+    });
+    it('Tooltip re-renders correctly', function () {
+        (0, test_tools_1.checkReRender)(function () { return (React.createElement(Tooltip_1.Tooltip, { content: "Render twice" },
+            React.createElement(button_1.ButtonV1, null, "Render twice"))); }, 2);
+    });
+    // Feel free to add more tests here
+});
+//# sourceMappingURL=Tooltip.test.js.map

package/lib-commonjs/__tests__/Tooltip.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.test.js","sourceRoot":"","sources":["../../src/__tests__/Tooltip.test.tsx"],"names":[],"mappings":";;;AAAA,mDAA+B;AAE/B,wDAAyD;AACzD,gEAA0F;AAC1F,oEAAgD;AAEhD,sCAAqC;AAErC,QAAQ,CAAC,yBAAyB,EAAE;IAClC,EAAE,CAAC,iBAAiB,EAAE;QACpB,IAAM,IAAI,GAAG,QAAQ;aAClB,MAAM,CACL,oBAAC,iBAAO,IAAC,OAAO,EAAC,gBAAgB;YAC/B,oBAAC,iBAAQ,yBAA0B,CAC3B,CACX;aACA,MAAM,EAAE,CAAC;QACZ,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,sDAAsD,EAAE;QACzD,IAAA,mCAAsB,EACpB,cAAM,OAAA,CACJ,oBAAC,iBAAO,IAAC,OAAO,EAAC,iBAAiB;YAChC,oBAAC,iBAAQ,0BAA2B,CAC5B,CACX,EAJK,CAIL,EACD,CAAC,CACF,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,8BAA8B,EAAE;QACjC,IAAA,0BAAa,EACX,cAAM,OAAA,CACJ,oBAAC,iBAAO,IAAC,OAAO,EAAC,cAAc;YAC7B,oBAAC,iBAAQ,uBAAwB,CACzB,CACX,EAJK,CAIL,EACD,CAAC,CACF,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,mCAAmC;AACrC,CAAC,CAAC,CAAC"}

package/lib-commonjs/index.d.ts

@@ -0,0 +1,4 @@
+export { Tooltip } from './Tooltip';
+export { tooltipName } from './Tooltip.types';
+export type { TooltipProps, TooltipSlotProps, TooltipType } from './Tooltip.types';
+//# sourceMappingURL=index.d.ts.map

package/lib-commonjs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,YAAY,EAAE,YAAY,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC"}

package/lib-commonjs/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.tooltipName = exports.Tooltip = void 0;
+var Tooltip_1 = require("./Tooltip");
+Object.defineProperty(exports, "Tooltip", { enumerable: true, get: function () { return Tooltip_1.Tooltip; } });
+var Tooltip_types_1 = require("./Tooltip.types");
+Object.defineProperty(exports, "tooltipName", { enumerable: true, get: function () { return Tooltip_types_1.tooltipName; } });
+//# sourceMappingURL=index.js.map

package/lib-commonjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;AAAA,qCAAoC;AAA3B,kGAAA,OAAO,OAAA;AAChB,iDAA8C;AAArC,4GAAA,WAAW,OAAA"}

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@fluentui-react-native/tooltip",
+  "version": "0.2.0",
+  "description": "A cross-platform Tooltip component for React Native.",
+  "main": "lib-commonjs/index.js",
+  "module": "lib/index.js",
+  "typings": "lib/index.d.ts",
+  "scripts": {
+    "build": "fluentui-scripts build",
+    "clean": "fluentui-scripts clean",
+    "depcheck": "fluentui-scripts depcheck",
+    "just": "fluentui-scripts",
+    "lint": "fluentui-scripts eslint",
+    "test": "fluentui-scripts jest",
+    "update-snapshots": "fluentui-scripts jest -u",
+    "prettier": "fluentui-scripts prettier",
+    "prettier-fix": "fluentui-scripts prettier --fix true"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/microsoft/fluentui-react-native.git",
+    "directory": "packages/experimental/Tooltip"
+  },
+  "dependencies": {
+    "@fluentui-react-native/callout": "^0.25.0",
+    "@fluentui-react-native/component-cache": "^1.6.0",
+    "@fluentui-react-native/framework": "0.12.0",
+    "tslib": "^2.3.1"
+  },
+  "devDependencies": {
+    "@fluentui-react-native/button": "^0.36.1",
+    "@fluentui-react-native/eslint-config-rules": "^0.1.1",
+    "@fluentui-react-native/scripts": "^0.1.1",
+    "@fluentui-react-native/test-tools": ">=0.1.1 <1.0.0",
+    "@office-iss/react-native-win32": "^0.72.0",
+    "@react-native/metro-config": "^0.72.0",
+    "react": "18.2.0",
+    "react-native": "^0.72.0"
+  },
+  "peerDependencies": {
+    "react": "18.2.0",
+    "react-native": "^0.72.0"
+  },
+  "author": "",
+  "license": "MIT",
+  "rnx-kit": {
+    "kitType": "library",
+    "alignDeps": {
+      "presets": [
+        "microsoft/react-native"
+      ],
+      "requirements": [
+        "react-native@0.72"
+      ],
+      "capabilities": [
+        "core",
+        "react"
+      ]
+    }
+  }
+}

package/src/Tooltip.tsx

@@ -0,0 +1,31 @@
+/** @jsxRuntime classic */
+import * as React from 'react';
+
+import { ensureNativeComponent } from '@fluentui-react-native/component-cache';
+import { mergeProps, stagedComponent } from '@fluentui-react-native/framework';
+
+import type { TooltipProps } from './Tooltip.types';
+import { tooltipName } from './Tooltip.types';
+
+const NativeTooltipView = ensureNativeComponent('RCTTooltip');
+
+/**
+ * A function which determines if a set of styles should be applied to the component given the current state and props of the tooltip.
+ *
+ * @param layer The name of the state that is being checked for
+ * @param userProps The props that were passed into the tooltip
+ * @returns Whether the styles that are assigned to the layer should be applied to the tooltip
+ */
+export const tooltipLookup = (layer: string, userProps: TooltipProps): boolean => {
+  return userProps[layer];
+};
+
+export const Tooltip = stagedComponent((props: TooltipProps) => {
+  return (rest: TooltipProps, children: React.ReactNode) => {
+    return <NativeTooltipView {...mergeProps(props, rest)}>{children}</NativeTooltipView>;
+  };
+});
+
+Tooltip.displayName = tooltipName;
+
+export default Tooltip;

package/src/Tooltip.types.ts

@@ -0,0 +1,54 @@
+import type * as React from 'react';
+import type { ViewStyle } from 'react-native';
+
+import type { DirectionalHint } from '@fluentui-react-native/callout';
+
+export const tooltipName = 'Tooltip';
+
+export type TooltipProps = React.PropsWithChildren<{
+  /**
+   * The text of the tooltip.
+   */
+  content: string;
+
+  /**
+   * Notification when the visibility of the tooltip is changed.
+   */
+  onVisibleChange?: (event, data) => void;
+
+  /**
+   * Positioning of the tooltip relative to the target element.
+   *
+   * @default topCenter
+   */
+  positioning?: DirectionalHint;
+
+  /**
+   * Allow consumers to pass in Style props
+   */
+  style?: ViewStyle;
+
+  /**
+   * Target anchor that tooltip uses for relative positioning. Certain components may proffer a string as an anchor target, such as
+   * anchoring to a point inside the component.
+   *
+   * If not provided, will anchor to the wrapper element.
+   */
+  target?: React.RefObject<React.Component> | string;
+
+  /**
+   * Controls the tooltip visibility and can be used in conjunction with onVisibleChange to modify show/hide behavior. If not provided, will be updated based on hover/focus events on target element.
+   *
+   * @default false
+   */
+  visible?: boolean;
+}>;
+
+export interface TooltipSlotProps {
+  root: TooltipProps;
+}
+
+export interface TooltipType {
+  props: TooltipProps;
+  slotProps: TooltipSlotProps;
+}

package/src/__tests__/Tooltip.test.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+
+import { ButtonV1 } from '@fluentui-react-native/button';
+import { checkRenderConsistency, checkReRender } from '@fluentui-react-native/test-tools';
+import * as renderer from 'react-test-renderer';
+
+import { Tooltip } from '../Tooltip';
+
+describe('Tooltip component tests', () => {
+  it('Tooltip default', () => {
+    const tree = renderer
+      .create(
+        <Tooltip content="Your component">
+          <ButtonV1>Your component</ButtonV1>
+        </Tooltip>,
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('Tooltip simple rendering does not invalidate styling', () => {
+    checkRenderConsistency(
+      () => (
+        <Tooltip content="Default Tooltip">
+          <ButtonV1>Default Tooltip</ButtonV1>
+        </Tooltip>
+      ),
+      2,
+    );
+  });
+
+  it('Tooltip re-renders correctly', () => {
+    checkReRender(
+      () => (
+        <Tooltip content="Render twice">
+          <ButtonV1>Render twice</ButtonV1>
+        </Tooltip>
+      ),
+      2,
+    );
+  });
+
+  // Feel free to add more tests here
+});

package/src/__tests__/__snapshots__/Tooltip.test.tsx.snap

@@ -0,0 +1,98 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Tooltip component tests Tooltip default 1`] = `
+<RCTTooltip
+  content="Your component"
+>
+  <View
+    accessibilityLabel="Your component"
+    accessibilityRole="button"
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": false,
+        "expanded": undefined,
+        "multiselectable": undefined,
+        "required": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    enableFocusRing={true}
+    focusable={true}
+    keyUpEvents={
+      [
+        {
+          "key": " ",
+        },
+        {
+          "key": "Enter",
+        },
+      ]
+    }
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onKeyUp={[Function]}
+    onLayout={[Function]}
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      {
+        "alignItems": "center",
+        "alignSelf": "flex-start",
+        "backgroundColor": "#ffffff",
+        "borderColor": "#d1d1d1",
+        "borderRadius": 4,
+        "borderWidth": 1,
+        "display": "flex",
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "minHeight": 24,
+        "minWidth": 64,
+        "padding": 3,
+        "paddingHorizontal": 7,
+        "width": undefined,
+      }
+    }
+  >
+    <Text
+      accessible={false}
+      ellipsizeMode="tail"
+      numberOfLines={0}
+      onAccessibilityTap={[Function]}
+      style={
+        {
+          "color": "#242424",
+          "fontFamily": "Segoe UI",
+          "fontSize": 12,
+          "fontWeight": "400",
+          "margin": 0,
+          "marginBottom": 1,
+          "marginEnd": -2,
+          "marginStart": 0,
+          "marginTop": -1,
+        }
+      }
+    >
+      Your component
+    </Text>
+  </View>
+</RCTTooltip>
+`;

package/src/index.ts

@@ -0,0 +1,3 @@
+export { Tooltip } from './Tooltip';
+export { tooltipName } from './Tooltip.types';
+export type { TooltipProps, TooltipSlotProps, TooltipType } from './Tooltip.types';

package/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "@fluentui-react-native/scripts/tsconfig.json",
+  "compilerOptions": {
+    "importHelpers": true,
+    "outDir": "lib",
+    "types": ["node", "jest"]
+  },
+  "include": ["src"]
+}