@fluentui/react-tooltip 0.0.0-nightly0e0cf06c3420211029.1 → 0.0.0-nightly3082edf34720220208.1

package/lib/components/Tooltip/useTooltipStyles.js

@@ -1,22 +1,42 @@
-import { __styles, mergeClasses } from '@fluentui/react-make-styles';
+import { shorthands, __styles, mergeClasses } from '@griffel/react';
+import { createArrowStyles } from '@fluentui/react-positioning';
+import { tokens } from '@fluentui/react-theme';
+import { arrowHeight } from './private/constants';
+export const tooltipClassName = 'fui-Tooltip';
 /**
  * Styles for the tooltip
  */
 
-var useStyles = /*#__PURE__*/__styles({
+const useStyles = /*#__PURE__*/__styles({
   "root": {
     "mc9l5x": "fjseox",
-    "z8tnut": "f1sbtcvk",
-    "z189sj": ["f11qrl6u", "fjlbh76"],
-    "Byoj8tv": "fy7v416",
-    "uwmqm3": ["fjlbh76", "f11qrl6u"],
+    "B7ck84d": "f1ewtqcl",
     "B2u0y6b": "f132xexn",
     "Bceei9c": "f158kwzp",
     "Bahqtrf": "fk6fouc",
     "Be2twd7": "fy9rknc",
     "Bg96gwp": "fwrc4pm",
-    "Dimara": "ft85np5",
-    "ayd6f0": "fcm7iae",
+    "Bbmb7ep": ["f1aa9q02", "f16jpd5f"],
+    "Beyfa6y": ["f16jpd5f", "f1aa9q02"],
+    "B7oj6ja": ["f1jar5jt", "fyu767a"],
+    "Btl43ni": ["fyu767a", "f1jar5jt"],
+    "B4j52fo": "f5ogflp",
+    "Bekrc4i": ["f1hqa2wf", "finvdd3"],
+    "Bn0qgzm": "f1f09k3d",
+    "ibv6hh": ["finvdd3", "f1hqa2wf"],
+    "icvyot": "fzkkow9",
+    "vrafjx": ["fcdblym", "fjik90z"],
+    "oivjwe": "fg706s2",
+    "wvpqe5": ["fjik90z", "fcdblym"],
+    "g2u3we": "fghlq4f",
+    "h3c5rm": ["f1gn591s", "fjscplz"],
+    "B9xav0g": "fb073pr",
+    "zhjwy3": ["fjscplz", "f1gn591s"],
+    "z8tnut": "f10ra9hq",
+    "z189sj": ["fd9xhir", "f1jlaasf"],
+    "Byoj8tv": "f1d7kygh",
+    "uwmqm3": ["f1jlaasf", "fd9xhir"],
+    "De3pzq": "fxugw4r",
     "sj55zd": "f19n0e5",
     "Bhu2qc9": "fxeb0a7"
   },
@@ -24,44 +44,51 @@ var useStyles = /*#__PURE__*/__styles({
     "mc9l5x": "ftgm304"
   },
   "inverted": {
-    "ayd6f0": "fdr7u1v",
+    "De3pzq": "f5pduvr",
     "sj55zd": "fqpbvvt"
   },
   "arrow": {
     "qhf8xq": "f1euv43f",
-    "a9b677": "fpkirms",
-    "Bqenvij": "ftt2rgf",
-    "ayd6f0": "f1uo6wrk",
+    "De3pzq": "f1u2r49w",
     "Bcdw1i0": "fd7fpy0",
     "Bj3rh1h": "f1bsuimh",
+    "a9b677": "f1ekdpwm",
+    "Bqenvij": "f83vc9z",
     "rurcny": "fuzzvh5",
+    "Bex5imi": "fkk33zh",
     "xx9plb": "fxf9f1y",
+    "Bmqnesq": "f170vdtw",
     "Bdn98qo": "f103af6e",
     "Bbc2r3f": "f15umuo5",
-    "B4zgs9e": "ffo048g",
-    "Bex5imi": "fkk33zh",
+    "B1dvbpk": "f3wpjpt",
+    "D4ky5z": "f1k3tce7",
+    "cqycoz": "f1dkdgqi",
+    "I89eb": "f5ghsz",
+    "k1i1uq": "fyqop9u",
+    "Epwjcz": "f1m5ya7j",
+    "Bp1vogq": "f3sp63x",
     "px8gyy": ["f5bg3dr", "f1rfdd74"],
-    "h6z6rw": ["fzd2j21", "f2549he"],
-    "hl6cv3": "fotnskf",
+    "h6z6rw": "fzd2j21",
+    "hl6cv3": "f1773hnp",
     "Bh2vraf": "f1n8855c",
-    "yayu3t": ["f1nq055x", "f13ohf3"],
+    "yayu3t": "f1v7783n",
     "wedwtw": "fsw6im5",
-    "rhl9o9": "ftghsr9",
+    "rhl9o9": "fh2hsk5",
     "Bu8t5uz": "f159pzir",
-    "B6q6orb": ["f1l8vbt4", "fsxzh25"],
+    "B6q6orb": "f11yvu4",
     "Bwwlvwl": "fm1ycve"
   }
 }, {
-  "d": [".fjseox{display:none;}", ".f1sbtcvk{padding-top:5px;}", ".f11qrl6u{padding-right:12px;}", ".fjlbh76{padding-left:12px;}", ".fy7v416{padding-bottom:7px;}", ".f132xexn{max-width:240px;}", ".f158kwzp{cursor:default;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".ft85np5{border-radius:var(--borderRadiusMedium);}", ".fcm7iae{background:var(--colorNeutralBackground1);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fxeb0a7{-webkit-filter:drop-shadow(0 0 2px var(--colorNeutralShadowAmbient)) drop-shadow(0 4px 8px var(--colorNeutralShadowKey));filter:drop-shadow(0 0 2px var(--colorNeutralShadowAmbient)) drop-shadow(0 4px 8px var(--colorNeutralShadowKey));}", ".ftgm304{display:block;}", ".fdr7u1v{background:var(--colorNeutralForeground2);}", ".fqpbvvt{color:var(--colorNeutralForegroundInverted);}", ".f1euv43f{position:absolute;}", ".fpkirms{width:8.485px;}", ".ftt2rgf{height:8.485px;}", ".f1uo6wrk{background:inherit;}", ".fd7fpy0{visibility:hidden;}", ".f1bsuimh{z-index:-1;}", ".fuzzvh5:before{content:\"\";}", ".fxf9f1y:before{position:absolute;}", ".f103af6e:before{width:inherit;}", ".f15umuo5:before{height:inherit;}", ".ffo048g:before{background:inherit;}", ".fkk33zh:before{visibility:visible;}", ".f5bg3dr:before{border-bottom-right-radius:var(--borderRadiusSmall);}", ".f1rfdd74:before{border-bottom-left-radius:var(--borderRadiusSmall);}", ".fzd2j21:before{-webkit-transform:rotate(var(--angle)) translate(0, 50%) rotate(45deg);-moz-transform:rotate(var(--angle)) translate(0, 50%) rotate(45deg);-ms-transform:rotate(var(--angle)) translate(0, 50%) rotate(45deg);transform:rotate(var(--angle)) translate(0, 50%) rotate(45deg);}", ".f2549he:before{-webkit-transform:rotate(var(--angle)) translate(0, 50%) rotate(-45deg);-moz-transform:rotate(var(--angle)) translate(0, 50%) rotate(-45deg);-ms-transform:rotate(var(--angle)) translate(0, 50%) rotate(-45deg);transform:rotate(var(--angle)) translate(0, 50%) rotate(-45deg);}", "[data-popper-placement^=\"top\"] .fotnskf{bottom:0;}", "[data-popper-placement^=\"top\"] .f1n8855c{--angle:0;}", "[data-popper-placement^=\"right\"] .f1nq055x{left:0;}", "[data-popper-placement^=\"right\"] .f13ohf3{right:0;}", "[data-popper-placement^=\"right\"] .fsw6im5{--angle:90deg;}", "[data-popper-placement^=\"bottom\"] .ftghsr9{top:0;}", "[data-popper-placement^=\"bottom\"] .f159pzir{--angle:180deg;}", "[data-popper-placement^=\"left\"] .f1l8vbt4{right:0;}", "[data-popper-placement^=\"left\"] .fsxzh25{left:0;}", "[data-popper-placement^=\"left\"] .fm1ycve{--angle:270deg;}"]
+  "d": [".fjseox{display:none;}", ".f1ewtqcl{box-sizing:border-box;}", ".f132xexn{max-width:240px;}", ".f158kwzp{cursor:default;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".f10ra9hq{padding-top:4px;}", ".fd9xhir{padding-right:11px;}", ".f1jlaasf{padding-left:11px;}", ".f1d7kygh{padding-bottom:6px;}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fxeb0a7{-webkit-filter:drop-shadow(0 0 2px var(--colorNeutralShadowAmbient)) drop-shadow(0 4px 8px var(--colorNeutralShadowKey));filter:drop-shadow(0 0 2px var(--colorNeutralShadowAmbient)) drop-shadow(0 4px 8px var(--colorNeutralShadowKey));}", ".ftgm304{display:block;}", ".f5pduvr{background-color:var(--colorNeutralBackgroundInverted);}", ".fqpbvvt{color:var(--colorNeutralForegroundInverted);}", ".f1euv43f{position:absolute;}", ".f1u2r49w{background-color:inherit;}", ".fd7fpy0{visibility:hidden;}", ".f1bsuimh{z-index:-1;}", ".f1ekdpwm{width:8.484px;}", ".f83vc9z{height:8.484px;}", ".fuzzvh5:before{content:\"\";}", ".fkk33zh:before{visibility:visible;}", ".fxf9f1y:before{position:absolute;}", ".f170vdtw:before{box-sizing:border-box;}", ".f103af6e:before{width:inherit;}", ".f15umuo5:before{height:inherit;}", ".f3wpjpt:before{background-color:inherit;}", ".f1k3tce7:before{border-right-width:1px;}", ".f1dkdgqi:before{border-right-style:solid;}", ".f5ghsz:before{border-right-color:var(--colorTransparentStroke);}", ".fyqop9u:before{border-bottom-width:1px;}", ".f1m5ya7j:before{border-bottom-style:solid;}", ".f3sp63x:before{border-bottom-color:var(--colorTransparentStroke);}", ".f5bg3dr:before{border-bottom-right-radius:var(--borderRadiusSmall);}", ".f1rfdd74:before{border-bottom-left-radius:var(--borderRadiusSmall);}", ".fzd2j21:before{-webkit-transform:rotate(var(--angle)) translate(0, 50%) rotate(45deg);-moz-transform:rotate(var(--angle)) translate(0, 50%) rotate(45deg);-ms-transform:rotate(var(--angle)) translate(0, 50%) rotate(45deg);transform:rotate(var(--angle)) translate(0, 50%) rotate(45deg);}", "[data-popper-placement^=\"top\"] .f1773hnp{bottom:-1px;}", "[data-popper-placement^=\"top\"] .f1n8855c{--angle:0;}", "[data-popper-placement^=\"right\"] .f1v7783n{left:-1px;}", "[data-popper-placement^=\"right\"] .fsw6im5{--angle:90deg;}", "[data-popper-placement^=\"bottom\"] .fh2hsk5{top:-1px;}", "[data-popper-placement^=\"bottom\"] .f159pzir{--angle:180deg;}", "[data-popper-placement^=\"left\"] .f11yvu4{right:-1px;}", "[data-popper-placement^=\"left\"] .fm1ycve{--angle:270deg;}"]
 });
 /**
  * Apply styling to the Tooltip slots based on the state
  */
 
 
-export var useTooltipStyles = function (state) {
-  var styles = useStyles();
-  state.root.className = mergeClasses(styles.root, state.appearance === 'inverted' && styles.inverted, state.visible && styles.visible, state.root.className);
+export const useTooltipStyles_unstable = state => {
+  const styles = useStyles();
+  state.content.className = mergeClasses(tooltipClassName, styles.root, state.appearance === 'inverted' && styles.inverted, state.visible && styles.visible, state.content.className);
   state.arrowClassName = styles.arrow;
   return state;
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Tooltip/useTooltipStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,6BAAzC;AAGA;;AAEG;;AACH,IAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAwDA;;AAEG;;;AACH,OAAO,IAAM,gBAAgB,GAAG,UAAC,KAAD,EAAoB;AAClD,MAAM,MAAM,GAAG,SAAS,EAAxB;AAEA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,MAAM,CAAC,IAD0B,EAEjC,KAAK,CAAC,UAAN,KAAqB,UAArB,IAAmC,MAAM,CAAC,QAFT,EAGjC,KAAK,CAAC,OAAN,IAAiB,MAAM,CAAC,OAHS,EAIjC,KAAK,CAAC,IAAN,CAAW,SAJsB,CAAnC;AAOA,EAAA,KAAK,CAAC,cAAN,GAAuB,MAAM,CAAC,KAA9B;AAEA,SAAO,KAAP;AACD,CAbM","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/Tooltip/useTooltipStyles.ts"],"names":[],"mappings":"AAAA,SAAS,UAAT,YAAiC,YAAjC,QAAqD,gBAArD;AACA,SAAS,iBAAT,QAAkC,6BAAlC;AACA,SAAS,MAAT,QAAuB,uBAAvB;AACA,SAAS,WAAT,QAA4B,qBAA5B;AAGA,OAAO,MAAM,gBAAgB,GAAG,aAAzB;AAEP;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAkCA;;AAEG;;;AACH,OAAO,MAAM,yBAAyB,GAAI,KAAD,IAAsC;AAC7E,QAAM,MAAM,GAAG,SAAS,EAAxB;AAEA,EAAA,KAAK,CAAC,OAAN,CAAc,SAAd,GAA0B,YAAY,CACpC,gBADoC,EAEpC,MAAM,CAAC,IAF6B,EAGpC,KAAK,CAAC,UAAN,KAAqB,UAArB,IAAmC,MAAM,CAAC,QAHN,EAIpC,KAAK,CAAC,OAAN,IAAiB,MAAM,CAAC,OAJY,EAKpC,KAAK,CAAC,OAAN,CAAc,SALsB,CAAtC;AAQA,EAAA,KAAK,CAAC,cAAN,GAAuB,MAAM,CAAC,KAA9B;AAEA,SAAO,KAAP;AACD,CAdM","sourceRoot":""}

package/lib-commonjs/Tooltip.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var tslib_1 = /*#__PURE__*/require("tslib");
+const tslib_1 = /*#__PURE__*/require("tslib");
 
 tslib_1.__exportStar(require("./components/Tooltip/index"), exports);
 //# sourceMappingURL=Tooltip.js.map

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

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

package/lib-commonjs/components/Tooltip/Tooltip.js

@@ -5,22 +5,23 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Tooltip = void 0;
 
-var React = /*#__PURE__*/require("react");
+const useTooltip_1 = /*#__PURE__*/require("./useTooltip");
 
-var useTooltip_1 = /*#__PURE__*/require("./useTooltip");
+const renderTooltip_1 = /*#__PURE__*/require("./renderTooltip");
 
-var renderTooltip_1 = /*#__PURE__*/require("./renderTooltip");
-
-var useTooltipStyles_1 = /*#__PURE__*/require("./useTooltipStyles");
+const useTooltipStyles_1 = /*#__PURE__*/require("./useTooltipStyles");
 /**
  * A tooltip provides light weight contextual information on top of its target element.
  */
 
 
-exports.Tooltip = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var state = useTooltip_1.useTooltip(props, ref);
-  useTooltipStyles_1.useTooltipStyles(state);
-  return renderTooltip_1.renderTooltip(state);
-});
+const Tooltip = props => {
+  const state = useTooltip_1.useTooltip_unstable(props);
+  useTooltipStyles_1.useTooltipStyles_unstable(state);
+  return renderTooltip_1.renderTooltip_unstable(state);
+};
+
+exports.Tooltip = Tooltip;
 exports.Tooltip.displayName = 'Tooltip';
+exports.Tooltip.isFluentTriggerComponent = true;
 //# sourceMappingURL=Tooltip.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":";;;;;;;AAAA,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,IAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;;AACA,IAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AACA,IAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,OAAA,gBAA6C,KAAK,CAAC,UAAN,CAAiB,UAAC,KAAD,EAAQ,GAAR,EAAW;AACpF,MAAM,KAAK,GAAG,YAAA,CAAA,UAAA,CAAW,KAAX,EAAkB,GAAlB,CAAd;AAEA,EAAA,kBAAA,CAAA,gBAAA,CAAiB,KAAjB;AACA,SAAO,eAAA,CAAA,aAAA,CAAc,KAAd,CAAP;AACD,CALyD,CAA7C;AAOb,OAAA,CAAA,OAAA,CAAQ,WAAR,GAAsB,SAAtB","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":";;;;;;;AACA,MAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AACA,MAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;AAIA;;AAEG;;;AACI,MAAM,OAAO,GAAoD,KAAK,IAAG;AAC9E,QAAM,KAAK,GAAG,YAAA,CAAA,mBAAA,CAAoB,KAApB,CAAd;AAEA,EAAA,kBAAA,CAAA,yBAAA,CAA0B,KAA1B;AACA,SAAO,eAAA,CAAA,sBAAA,CAAuB,KAAvB,CAAP;AACD,CALM;;AAAM,OAAA,CAAA,OAAA,GAAO,OAAP;AAOb,OAAA,CAAA,OAAA,CAAQ,WAAR,GAAsB,SAAtB;AACA,OAAA,CAAA,OAAA,CAAQ,wBAAR,GAAmC,IAAnC","sourceRoot":""}

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

@@ -1,41 +1,24 @@
 import * as React from 'react';
 import type { PositioningShorthand } from '@fluentui/react-positioning';
-import type { ComponentProps, ComponentState, IntrinsicShorthandProps } from '@fluentui/react-utilities';
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
 /**
  * Slot properties for Tooltip
  */
 export declare type TooltipSlots = {
-    root: Omit<IntrinsicShorthandProps<'div'>, 'children'> & {
-        /**
-         * The child is the element that triggers the Tooltip. It will have additional properties added,
-         * including events and aria properties.
-         * Alternatively, children can be a render function that takes the props and adds
-         * them to the appropriate elements.
-         */
-        children?: (React.ReactElement<React.HTMLAttributes<HTMLElement>> & {
-            ref?: React.Ref<unknown>;
-        }) | ((props: TooltipTriggerProps) => React.ReactNode) | null;
-    };
+    content: NonNullable<Slot<'div'>>;
 };
 /**
  * Properties and state for Tooltip
  */
 export declare type TooltipCommons = {
     /**
-     * A tooltip can appear with the default appearance or inverted.
-     * When not specified, the default appearance is used.
-     */
-    appearance?: 'inverted';
-    /**
-     * The content displayed inside the tooltip.
-     */
-    content: React.ReactNode;
-    /**
-     * Color variant with inverted colors
+     * 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 false
+     * @defaultvalue normal
      */
-    inverted?: boolean;
+    appearance?: 'normal' | 'inverted';
     /**
      * Render an arrow pointing to the target element
      *
@@ -62,15 +45,15 @@ export declare type TooltipCommons = {
      */
     onVisibleChange?: (event: React.PointerEvent<HTMLElement> | React.FocusEvent<HTMLElement> | undefined, data: OnVisibleChangeData) => void;
     /**
-     * Specifies which aria attribute to set on the trigger element.
-     * * `label` - Set aria-label to the tooltip's content. Requires content to be a string; if not, uses `labelledby`.
-     * * `labelledby` - Set aria-labelledby to the tooltip's id. The id is generated if not provided.
-     * * `describedby` - Set aria-describedby to the tooltip's id. The id is generated if not provided.
-     * * null - Do not set any aria attributes on the trigger element.
+     * (Required) Specifies whether this tooltip is acting as the description or label of its trigger element.
      *
-     * @defaultvalue label
+     * * `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.
      */
-    triggerAriaAttribute: 'label' | 'labelledby' | 'describedby' | null;
+    relationship: 'label' | 'description' | 'inaccessible';
     /**
      * Delay before the tooltip is shown, in milliseconds.
      *
@@ -99,18 +82,18 @@ export declare type OnVisibleChangeData = {
 /**
  * Properties for Tooltip
  */
-export declare type TooltipProps = ComponentProps<TooltipSlots> & Partial<Omit<TooltipCommons, 'content'>> & Pick<TooltipCommons, 'content'>;
+export declare type TooltipProps = ComponentProps<TooltipSlots> & Partial<Omit<TooltipCommons, 'relationship'>> & Pick<TooltipCommons, 'relationship'> & {
+    children?: (React.ReactElement & {
+        ref?: React.Ref<unknown>;
+    }) | ((props: TooltipTriggerProps) => React.ReactElement | null) | null;
+};
 /**
  * State used in rendering Tooltip
  */
 export declare type TooltipState = ComponentState<TooltipSlots> & TooltipCommons & {
+    children?: React.ReactElement | null;
     /**
      * Whether the tooltip should be rendered to the DOM.
-     *
-     * Normally the tooltip will only be rendered when visible. However, if
-     * triggerAriaAttribute is labelledby or describedby, the tooltip will
-     * always be rendered even when hidden so that those aria attributes
-     * to always refer to a valid DOM element.
      */
     shouldRenderTooltip?: boolean;
     /**

package/lib-commonjs/components/Tooltip/index.d.ts

@@ -2,4 +2,4 @@ export * from './Tooltip';
 export * from './Tooltip.types';
 export * from './renderTooltip';
 export * from './useTooltip';
-export { useTooltipStyles } from './useTooltipStyles';
+export * from './useTooltipStyles';

package/lib-commonjs/components/Tooltip/index.js

@@ -3,9 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useTooltipStyles = void 0;
 
-var tslib_1 = /*#__PURE__*/require("tslib");
+const tslib_1 = /*#__PURE__*/require("tslib");
 
 tslib_1.__exportStar(require("./Tooltip"), exports);
 
@@ -15,12 +14,5 @@ tslib_1.__exportStar(require("./renderTooltip"), exports);
 
 tslib_1.__exportStar(require("./useTooltip"), exports);
 
-var useTooltipStyles_1 = /*#__PURE__*/require("./useTooltipStyles");
-
-Object.defineProperty(exports, "useTooltipStyles", {
-  enumerable: true,
-  get: function () {
-    return useTooltipStyles_1.useTooltipStyles;
-  }
-});
+tslib_1.__exportStar(require("./useTooltipStyles"), exports);
 //# sourceMappingURL=index.js.map

package/lib-commonjs/components/Tooltip/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Tooltip/index.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,WAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA;;AACA,IAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,kBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,kBAAA,CAAA,gBAAA;AAAgB;AAAhB,CAAA","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/Tooltip/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,WAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,oBAAA,CAAA,EAAA,OAAA","sourceRoot":""}

package/lib-commonjs/components/Tooltip/private/constants.d.ts

@@ -0,0 +1,12 @@
+/**
+ * The height of the tooltip's arrow in pixels.
+ */
+export declare const arrowHeight = 6;
+/**
+ * The default value of the tooltip's border radius (borderRadiusMedium).
+ *
+ * Unfortunately, Popper requires it to be specified as a variable instead of using CSS.
+ * While we could use getComputedStyle, that adds a performance penalty for something that
+ * will likely never change.
+ */
+export declare const tooltipBorderRadius = 4;

package/lib-commonjs/components/Tooltip/private/constants.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.tooltipBorderRadius = exports.arrowHeight = void 0;
+/**
+ * The height of the tooltip's arrow in pixels.
+ */
+
+exports.arrowHeight = 6;
+/**
+ * The default value of the tooltip's border radius (borderRadiusMedium).
+ *
+ * Unfortunately, Popper requires it to be specified as a variable instead of using CSS.
+ * While we could use getComputedStyle, that adds a performance penalty for something that
+ * will likely never change.
+ */
+
+exports.tooltipBorderRadius = 4;
+//# sourceMappingURL=constants.js.map

package/lib-commonjs/components/Tooltip/private/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Tooltip/private/constants.ts"],"names":[],"mappings":";;;;;;AAAA;;AAEG;;AACU,OAAA,CAAA,WAAA,GAAc,CAAd;AAEb;;;;;;AAMG;;AACU,OAAA,CAAA,mBAAA,GAAsB,CAAtB","sourceRoot":""}

package/lib-commonjs/components/Tooltip/renderTooltip.d.ts

@@ -2,4 +2,4 @@ import type { TooltipState } from './Tooltip.types';
 /**
  * Render the final JSX of Tooltip
  */
-export declare const renderTooltip: (state: TooltipState) => JSX.Element;
+export declare const renderTooltip_unstable: (state: TooltipState) => JSX.Element;

package/lib-commonjs/components/Tooltip/renderTooltip.js

@@ -3,30 +3,29 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.renderTooltip = void 0;
+exports.renderTooltip_unstable = void 0;
 
-var tslib_1 = /*#__PURE__*/require("tslib");
+const React = /*#__PURE__*/require("react");
 
-var React = /*#__PURE__*/require("react");
+const react_portal_1 = /*#__PURE__*/require("@fluentui/react-portal");
 
-var react_portal_1 = /*#__PURE__*/require("@fluentui/react-portal");
-
-var react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 /**
  * Render the final JSX of Tooltip
  */
 
 
-var renderTooltip = function (state) {
-  var _a = react_utilities_1.getSlots(state, ['root']),
-      slots = _a.slots,
-      slotProps = _a.slotProps;
-
-  return React.createElement(React.Fragment, null, state.root.children, state.shouldRenderTooltip && React.createElement(react_portal_1.Portal, null, React.createElement(slots.root, tslib_1.__assign({}, slotProps.root), state.withArrow && React.createElement("div", {
+const renderTooltip_unstable = state => {
+  const {
+    slots,
+    slotProps
+  } = react_utilities_1.getSlots(state);
+  return React.createElement(React.Fragment, null, state.children, state.shouldRenderTooltip && React.createElement(react_portal_1.Portal, null, React.createElement(slots.content, { ...slotProps.content
+  }, state.withArrow && React.createElement("div", {
     ref: state.arrowRef,
     className: state.arrowClassName
-  }), state.content)));
+  }), state.content.children)));
 };
 
-exports.renderTooltip = renderTooltip;
+exports.renderTooltip_unstable = renderTooltip_unstable;
 //# sourceMappingURL=renderTooltip.js.map

package/lib-commonjs/components/Tooltip/renderTooltip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Tooltip/renderTooltip.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,IAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,IAAM,aAAa,GAAG,UAAC,KAAD,EAAoB;AACzC,MAAA,EAAA,GAAuB,iBAAA,CAAA,QAAA,CAAuB,KAAvB,EAA8B,CAAC,MAAD,CAA9B,CAAvB;AAAA,MAAE,KAAK,GAAA,EAAA,CAAA,KAAP;AAAA,MAAS,SAAS,GAAA,EAAA,CAAA,SAAlB;;AAEN,SACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EACG,KAAK,CAAC,IAAN,CAAW,QADd,EAEG,KAAK,CAAC,mBAAN,IACC,KAAA,CAAA,aAAA,CAAC,cAAA,CAAA,MAAD,EAAO,IAAP,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,EACG,KAAK,CAAC,SAAN,IAAmB,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,IAAA,GAAG,EAAE,KAAK,CAAC,QAAhB;AAA0B,IAAA,SAAS,EAAE,KAAK,CAAC;AAA3C,GAAA,CADtB,EAEG,KAAK,CAAC,OAFT,CADF,CAHJ,CADF;AAaD,CAhBM;;AAAM,OAAA,CAAA,aAAA,GAAa,aAAb","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/Tooltip/renderTooltip.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,sBAAsB,GAAI,KAAD,IAAwB;AAC5D,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAAuB,KAAvB,CAA7B;AAEA,SACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EACG,KAAK,CAAC,QADT,EAEG,KAAK,CAAC,mBAAN,IACC,KAAA,CAAA,aAAA,CAAC,cAAA,CAAA,MAAD,EAAO,IAAP,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC;AAAf,GAAd,EACG,KAAK,CAAC,SAAN,IAAmB,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,IAAA,GAAG,EAAE,KAAK,CAAC,QAAhB;AAA0B,IAAA,SAAS,EAAE,KAAK,CAAC;AAA3C,GAAA,CADtB,EAEG,KAAK,CAAC,OAAN,CAAc,QAFjB,CADF,CAHJ,CADF;AAaD,CAhBM;;AAAM,OAAA,CAAA,sBAAA,GAAsB,sBAAtB","sourceRoot":""}

package/lib-commonjs/components/Tooltip/useTooltip.d.ts

@@ -1,13 +1,10 @@
-import * as React from 'react';
 import type { TooltipProps, TooltipState } from './Tooltip.types';
 /**
  * Create the state required to render Tooltip.
  *
- * The returned state can be modified with hooks such as useTooltipStyles,
- * before being passed to renderTooltip.
+ * 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
- * @param ref - reference to root HTMLElement of Tooltip
- * @param defaultProps - (optional) default prop values provided by the implementing type
  */
-export declare const useTooltip: (props: TooltipProps, ref: React.Ref<HTMLDivElement>) => TooltipState;
+export declare const useTooltip_unstable: (props: TooltipProps) => TooltipState;