@sproutsocial/seeds-react-tooltip 1.0.0

package/.eslintignore

@@ -0,0 +1,6 @@
+# Node modules
+node_modules/
+
+# Build output
+dist/
+coverage/

package/.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: ["eslint-config-seeds/racine"],
+};

package/.turbo/turbo-build.log

@@ -0,0 +1,21 @@
+yarn run v1.22.22
+$ tsup --dts
+CLI Building entry: src/index.ts
+CLI Using tsconfig: tsconfig.json
+CLI tsup v8.0.2
+CLI Using tsup config: /home/runner/work/seeds/seeds/seeds-react/seeds-react-tooltip/tsup.config.ts
+CLI Target: es2022
+CLI Cleaning output folder
+CJS Build start
+ESM Build start
+ESM dist/esm/index.js     4.49 KB
+ESM dist/esm/index.js.map 10.17 KB
+ESM ⚡️ Build success in 146ms
+CJS dist/index.js     6.47 KB
+CJS dist/index.js.map 10.28 KB
+CJS ⚡️ Build success in 151ms
+DTS Build start
+DTS ⚡️ Build success in 15731ms
+DTS dist/index.d.ts  1.91 KB
+DTS dist/index.d.mts 1.91 KB
+Done in 20.16s.

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @sproutsocial/seeds-react-tooltip
+
+## 1.0.0
+
+### Major Changes
+
+- 4a52cff: Migrate Numeral and Tooltip components to their own seeds-react component

package/dist/esm/index.js

@@ -0,0 +1,173 @@
+// src/Tooltip.tsx
+import * as React from "react";
+import { useState, useEffect } from "react";
+import MOTION from "@sproutsocial/seeds-motion/unitless";
+import Popout from "@sproutsocial/seeds-react-popout";
+
+// src/styles.ts
+import styled from "styled-components";
+import Box from "@sproutsocial/seeds-react-box";
+var StyledTooltipContent = styled(Box)`
+  font-family: ${(props) => props.theme.fontFamily};
+  ${(props) => props.theme.typography[200]}
+  text-align: ${(props) => props.appearance === "box" ? "left" : "center"};
+`;
+
+// src/Tooltip.tsx
+import { jsx } from "react/jsx-runtime";
+var idCounter = 0;
+var hasAttribute = (child, attribute) => {
+  return React.isValidElement(child) && child.props[attribute] !== void 0;
+};
+var TooltipBubble = ({
+  appearance = "pill",
+  children,
+  onFocus,
+  onBlur,
+  ...rest
+}) => {
+  const handleFocus = (e) => {
+    onFocus(e);
+  };
+  const handleBlur = (e) => {
+    onBlur(e);
+  };
+  return /* @__PURE__ */ jsx(
+    StyledTooltipContent,
+    {
+      role: "tooltip",
+      appearance,
+      borderRadius: appearance === "box" ? 500 : "5000em",
+      px: 400,
+      py: appearance === "box" ? 400 : 200,
+      m: 200,
+      color: "text.body",
+      bg: "container.background.base",
+      boxShadow: "medium",
+      border: 500,
+      borderColor: "container.border.base",
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      onMouseEnter: handleFocus,
+      onMouseLeave: handleBlur,
+      tabIndex: 0,
+      ...rest,
+      children
+    }
+  );
+};
+var Tooltip = ({
+  content,
+  children,
+  enterDelay = MOTION.MOTION_DURATION_FAST * 1e3,
+  placement = "auto",
+  appearance,
+  zIndex = 7,
+  qa,
+  popoutProps,
+  truncated = false,
+  onFocus,
+  onBlur,
+  ...rest
+}) => {
+  const [shouldShow, setShouldShow] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
+  const [id] = useState(`Racine-tooltip-${idCounter++}`);
+  const isInvalidContent = content === null || content === void 0;
+  const show = (e) => {
+    onFocus?.(e);
+    setShouldShow(true);
+  };
+  const hide = (e) => {
+    onBlur?.(e);
+    setShouldShow(false);
+  };
+  const exitDelay = MOTION.MOTION_DURATION_FAST * 1e3;
+  const defaultAppearance = appearance || (typeof content === "object" ? "box" : "pill");
+  useEffect(() => {
+    const documentBody = document.body;
+    let timeout;
+    const onEsc = (e) => {
+      if (["Escape", "Esc"].includes(e.key)) {
+        setIsOpen(false);
+        setShouldShow(false);
+      }
+    };
+    if (shouldShow) {
+      timeout = setTimeout(() => setIsOpen(true), enterDelay);
+    } else {
+      timeout = setTimeout(() => {
+        setIsOpen(false);
+      }, exitDelay);
+    }
+    if (isOpen) {
+      documentBody.addEventListener("keydown", onEsc, { capture: true });
+    }
+    return () => {
+      documentBody.removeEventListener("keydown", onEsc, { capture: true });
+      clearTimeout(timeout);
+    };
+  }, [isOpen, setShouldShow, shouldShow, enterDelay, exitDelay]);
+  const TooltipContent = () => /* @__PURE__ */ jsx(
+    TooltipBubble,
+    {
+      appearance: defaultAppearance,
+      onFocus: show,
+      onBlur: hide,
+      "aria-expanded": isOpen,
+      id,
+      ...rest,
+      children: content
+    }
+  );
+  return /* @__PURE__ */ jsx(
+    Popout,
+    {
+      content: !isInvalidContent ? TooltipContent : void 0,
+      isOpen,
+      placement,
+      qa: {
+        "data-qa-tooltip": id,
+        ...qa
+      },
+      id: id + "-wrapper",
+      focusOnContent: false,
+      zIndex,
+      "aria-haspopup": "false",
+      display: truncated ? "flex" : void 0,
+      disableWrapperAria: true,
+      ...popoutProps,
+      children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          onBlur: hide,
+          onFocus: show,
+          onMouseEnter: show,
+          onMouseLeave: hide,
+          style: truncated ? {
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap"
+          } : {},
+          children: React.isValidElement(children) ? React.cloneElement(children, {
+            //** There may be cases where the Tooltip's child needs to properly describe its role as expanding a drawer, in which case that propery takes priority */
+            "aria-expanded": hasAttribute(children, "aria-expanded") ? children.props["aria-expanded"] : isOpen,
+            "aria-describedby": id
+          }) : children
+        }
+      )
+    }
+  );
+};
+var Tooltip_default = Tooltip;
+
+// src/TooltipTypes.ts
+import "react";
+
+// src/index.ts
+var src_default = Tooltip_default;
+export {
+  Tooltip_default as Tooltip,
+  src_default as default
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Tooltip.tsx","../../src/styles.ts","../../src/TooltipTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { useState, useEffect } from \"react\";\nimport MOTION from \"@sproutsocial/seeds-motion/unitless\";\nimport Popout from \"@sproutsocial/seeds-react-popout\";\nimport { StyledTooltipContent } from \"./styles\";\nimport type { TypeTooltipProps, TypeTooltipContent } from \"./TooltipTypes\";\n\nlet idCounter = 0;\n\nconst hasAttribute = (child: React.ReactNode, attribute: string) => {\n  return React.isValidElement(child) && child.props[attribute] !== undefined;\n};\n\n/** Tooltip Styled Popout wrapper for handling events */\nconst TooltipBubble = ({\n  appearance = \"pill\",\n  children,\n  onFocus,\n  onBlur,\n  ...rest\n}: TypeTooltipContent) => {\n  // @ts-ignore Will fix during refactor\n  const handleFocus = (e) => {\n    onFocus(e);\n  };\n  // @ts-ignore Will fix during refactor\n  const handleBlur = (e) => {\n    onBlur(e);\n  };\n  return (\n    <StyledTooltipContent\n      role=\"tooltip\"\n      appearance={appearance}\n      borderRadius={appearance === \"box\" ? 500 : \"5000em\"}\n      px={400}\n      py={appearance === \"box\" ? 400 : 200}\n      m={200}\n      color=\"text.body\"\n      bg=\"container.background.base\"\n      boxShadow=\"medium\"\n      border={500}\n      borderColor=\"container.border.base\"\n      onFocus={handleFocus}\n      onBlur={handleBlur}\n      onMouseEnter={handleFocus}\n      onMouseLeave={handleBlur}\n      tabIndex={0}\n      {...rest}\n    >\n      {children}\n    </StyledTooltipContent>\n  );\n};\n\n/** Core component */\nconst Tooltip = ({\n  content,\n  children,\n  enterDelay = MOTION.MOTION_DURATION_FAST * 1000,\n  placement = \"auto\",\n  appearance,\n  zIndex = 7,\n  qa,\n  popoutProps,\n  truncated = false,\n  onFocus,\n  onBlur,\n  ...rest\n}: TypeTooltipProps) => {\n  const [shouldShow, setShouldShow] = useState(false);\n  const [isOpen, setIsOpen] = useState(false);\n  const [id] = useState(`Racine-tooltip-${idCounter++}`);\n  const isInvalidContent = content === null || content === undefined;\n\n  // @ts-ignore Will fix during refactor\n  const show = (e) => {\n    onFocus?.(e);\n    setShouldShow(true);\n  };\n  // @ts-ignore Will fix during refactor\n  const hide = (e) => {\n    onBlur?.(e);\n    setShouldShow(false);\n  };\n\n  const exitDelay = MOTION.MOTION_DURATION_FAST * 1000;\n  const defaultAppearance =\n    appearance || (typeof content === \"object\" ? \"box\" : \"pill\");\n\n  /** Handles all the logic around whether to display/not display */\n  useEffect(() => {\n    const documentBody = document.body;\n    let timeout;\n    const onEsc = (e: KeyboardEvent): void => {\n      // older browsers use \"Esc\"\n      if ([\"Escape\", \"Esc\"].includes(e.key)) {\n        setIsOpen(false);\n        setShouldShow(false);\n      }\n    };\n\n    if (shouldShow) {\n      timeout = setTimeout(() => setIsOpen(true), enterDelay);\n    } else {\n      timeout = setTimeout(() => {\n        setIsOpen(false);\n      }, exitDelay);\n    }\n\n    // We only want listeners from the tooltip if its open in the first place\n    if (isOpen) {\n      documentBody.addEventListener(\"keydown\", onEsc, { capture: true });\n    }\n    return () => {\n      documentBody.removeEventListener(\"keydown\", onEsc, { capture: true });\n      clearTimeout(timeout);\n    };\n  }, [isOpen, setShouldShow, shouldShow, enterDelay, exitDelay]);\n\n  /** The wrapped content of whats inside the Tooltip */\n  const TooltipContent = () => (\n    <TooltipBubble\n      appearance={defaultAppearance}\n      onFocus={show}\n      onBlur={hide}\n      aria-expanded={isOpen}\n      id={id}\n      {...rest}\n    >\n      {content}\n    </TooltipBubble>\n  );\n\n  return (\n    <Popout\n      content={!isInvalidContent ? TooltipContent : undefined}\n      isOpen={isOpen}\n      placement={placement}\n      qa={{\n        \"data-qa-tooltip\": id,\n        ...qa,\n      }}\n      id={id + \"-wrapper\"}\n      focusOnContent={false}\n      zIndex={zIndex}\n      aria-haspopup=\"false\"\n      display={truncated ? \"flex\" : undefined}\n      disableWrapperAria={true} // required so that the child span doesnt take in redundant aria props\n      {...popoutProps}\n    >\n      <span\n        onBlur={hide}\n        onFocus={show}\n        onMouseEnter={show}\n        onMouseLeave={hide}\n        style={\n          truncated\n            ? {\n                overflow: \"hidden\",\n                textOverflow: \"ellipsis\",\n                whiteSpace: \"nowrap\",\n              }\n            : {}\n        }\n      >\n        {React.isValidElement(children)\n          ? React.cloneElement(children as React.ReactElement, {\n              //** There may be cases where the Tooltip's child needs to properly describe its role as expanding a drawer, in which case that propery takes priority */\n              \"aria-expanded\": hasAttribute(children, \"aria-expanded\")\n                ? children.props[\"aria-expanded\"]\n                : isOpen,\n              \"aria-describedby\": id,\n            })\n          : children}\n      </span>\n    </Popout>\n  );\n};\n\nexport default Tooltip;\n","import styled from \"styled-components\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport type { TypeTooltipContent } from \"./TooltipTypes\";\n\nexport const StyledTooltipContent = styled(Box)<\n  Pick<TypeTooltipContent, \"appearance\">\n>`\n  font-family: ${(props) => props.theme.fontFamily};\n  ${(props) => props.theme.typography[200]}\n  text-align: ${(props) => (props.appearance === \"box\" ? \"left\" : \"center\")};\n`;\n","import * as React from \"react\";\nimport type { TypePopoutProps } from \"@sproutsocial/seeds-react-popout\";\nimport type { TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\n\nexport interface TypeTooltipProps\n  extends Omit<\n    TypeBoxProps,\n    \"children\" | \"content\" | \"onMouseEnter\" | \"onMouseLeave\"\n  > {\n  /** The content that the tooltip should be attached to. Hovering or focusing this element will cause the tooltip to appear */\n  children: React.ReactNode;\n\n  /** The content to be displayed within the tooltip. If there is no content, just the children are rendered */\n  content: React.ReactNode;\n\n  /** The placement of the tooltip in relation to the children */\n  placement?: TypePopoutProps[\"placement\"];\n\n  /** The time (in ms) that a user has to be hovered/focused before the tooltip will appear  */\n  enterDelay?: number;\n\n  /** Used to override the appearance of the Tooltip content. By default, strings will have the 'pill' appearance, and more complex content will have the 'box' appearance. You can change those defaults by setting this prop. */\n  appearance?: \"pill\" | \"box\";\n  qa?: object;\n  zIndex?: number;\n\n  /** Props to be spread onto the underlying Popout component */\n  popoutProps?: Partial<TypePopoutProps>;\n\n  /** Truncates text into a single line with ellipsis */\n  truncated?: boolean;\n\n  ariaProps?: Record<string, string>;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\nexport interface TypeTooltipContent\n  extends Pick<TypeTooltipProps, \"appearance\" | \"children\"> {\n  onFocus: (e: React.FocusEvent<HTMLDivElement, FocusEvent>) => void;\n  onBlur: (e: React.FocusEvent<HTMLDivElement, FocusEvent>) => void;\n}\n","import Tooltip from \"./Tooltip\";\n\nexport default Tooltip;\nexport { Tooltip };\nexport * from \"./TooltipTypes\";\n"],"mappings":"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","names":[]}

package/dist/index.d.mts

@@ -0,0 +1,33 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { TypePopoutProps } from '@sproutsocial/seeds-react-popout';
+import { TypeBoxProps } from '@sproutsocial/seeds-react-box';
+
+interface TypeTooltipProps extends Omit<TypeBoxProps, "children" | "content" | "onMouseEnter" | "onMouseLeave"> {
+    /** The content that the tooltip should be attached to. Hovering or focusing this element will cause the tooltip to appear */
+    children: React.ReactNode;
+    /** The content to be displayed within the tooltip. If there is no content, just the children are rendered */
+    content: React.ReactNode;
+    /** The placement of the tooltip in relation to the children */
+    placement?: TypePopoutProps["placement"];
+    /** The time (in ms) that a user has to be hovered/focused before the tooltip will appear  */
+    enterDelay?: number;
+    /** Used to override the appearance of the Tooltip content. By default, strings will have the 'pill' appearance, and more complex content will have the 'box' appearance. You can change those defaults by setting this prop. */
+    appearance?: "pill" | "box";
+    qa?: object;
+    zIndex?: number;
+    /** Props to be spread onto the underlying Popout component */
+    popoutProps?: Partial<TypePopoutProps>;
+    /** Truncates text into a single line with ellipsis */
+    truncated?: boolean;
+    ariaProps?: Record<string, string>;
+}
+interface TypeTooltipContent extends Pick<TypeTooltipProps, "appearance" | "children"> {
+    onFocus: (e: React.FocusEvent<HTMLDivElement, FocusEvent>) => void;
+    onBlur: (e: React.FocusEvent<HTMLDivElement, FocusEvent>) => void;
+}
+
+/** Core component */
+declare const Tooltip: ({ content, children, enterDelay, placement, appearance, zIndex, qa, popoutProps, truncated, onFocus, onBlur, ...rest }: TypeTooltipProps) => react_jsx_runtime.JSX.Element;
+
+export { Tooltip, type TypeTooltipContent, type TypeTooltipProps, Tooltip as default };

package/dist/index.d.ts

@@ -0,0 +1,33 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { TypePopoutProps } from '@sproutsocial/seeds-react-popout';
+import { TypeBoxProps } from '@sproutsocial/seeds-react-box';
+
+interface TypeTooltipProps extends Omit<TypeBoxProps, "children" | "content" | "onMouseEnter" | "onMouseLeave"> {
+    /** The content that the tooltip should be attached to. Hovering or focusing this element will cause the tooltip to appear */
+    children: React.ReactNode;
+    /** The content to be displayed within the tooltip. If there is no content, just the children are rendered */
+    content: React.ReactNode;
+    /** The placement of the tooltip in relation to the children */
+    placement?: TypePopoutProps["placement"];
+    /** The time (in ms) that a user has to be hovered/focused before the tooltip will appear  */
+    enterDelay?: number;
+    /** Used to override the appearance of the Tooltip content. By default, strings will have the 'pill' appearance, and more complex content will have the 'box' appearance. You can change those defaults by setting this prop. */
+    appearance?: "pill" | "box";
+    qa?: object;
+    zIndex?: number;
+    /** Props to be spread onto the underlying Popout component */
+    popoutProps?: Partial<TypePopoutProps>;
+    /** Truncates text into a single line with ellipsis */
+    truncated?: boolean;
+    ariaProps?: Record<string, string>;
+}
+interface TypeTooltipContent extends Pick<TypeTooltipProps, "appearance" | "children"> {
+    onFocus: (e: React.FocusEvent<HTMLDivElement, FocusEvent>) => void;
+    onBlur: (e: React.FocusEvent<HTMLDivElement, FocusEvent>) => void;
+}
+
+/** Core component */
+declare const Tooltip: ({ content, children, enterDelay, placement, appearance, zIndex, qa, popoutProps, truncated, onFocus, onBlur, ...rest }: TypeTooltipProps) => react_jsx_runtime.JSX.Element;
+
+export { Tooltip, type TypeTooltipContent, type TypeTooltipProps, Tooltip as default };

package/dist/index.js

@@ -0,0 +1,210 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Tooltip: () => Tooltip_default,
+  default: () => src_default
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/Tooltip.tsx
+var React = __toESM(require("react"));
+var import_react = require("react");
+var import_unitless = __toESM(require("@sproutsocial/seeds-motion/unitless"));
+var import_seeds_react_popout = __toESM(require("@sproutsocial/seeds-react-popout"));
+
+// src/styles.ts
+var import_styled_components = __toESM(require("styled-components"));
+var import_seeds_react_box = __toESM(require("@sproutsocial/seeds-react-box"));
+var StyledTooltipContent = (0, import_styled_components.default)(import_seeds_react_box.default)`
+  font-family: ${(props) => props.theme.fontFamily};
+  ${(props) => props.theme.typography[200]}
+  text-align: ${(props) => props.appearance === "box" ? "left" : "center"};
+`;
+
+// src/Tooltip.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var idCounter = 0;
+var hasAttribute = (child, attribute) => {
+  return React.isValidElement(child) && child.props[attribute] !== void 0;
+};
+var TooltipBubble = ({
+  appearance = "pill",
+  children,
+  onFocus,
+  onBlur,
+  ...rest
+}) => {
+  const handleFocus = (e) => {
+    onFocus(e);
+  };
+  const handleBlur = (e) => {
+    onBlur(e);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    StyledTooltipContent,
+    {
+      role: "tooltip",
+      appearance,
+      borderRadius: appearance === "box" ? 500 : "5000em",
+      px: 400,
+      py: appearance === "box" ? 400 : 200,
+      m: 200,
+      color: "text.body",
+      bg: "container.background.base",
+      boxShadow: "medium",
+      border: 500,
+      borderColor: "container.border.base",
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      onMouseEnter: handleFocus,
+      onMouseLeave: handleBlur,
+      tabIndex: 0,
+      ...rest,
+      children
+    }
+  );
+};
+var Tooltip = ({
+  content,
+  children,
+  enterDelay = import_unitless.default.MOTION_DURATION_FAST * 1e3,
+  placement = "auto",
+  appearance,
+  zIndex = 7,
+  qa,
+  popoutProps,
+  truncated = false,
+  onFocus,
+  onBlur,
+  ...rest
+}) => {
+  const [shouldShow, setShouldShow] = (0, import_react.useState)(false);
+  const [isOpen, setIsOpen] = (0, import_react.useState)(false);
+  const [id] = (0, import_react.useState)(`Racine-tooltip-${idCounter++}`);
+  const isInvalidContent = content === null || content === void 0;
+  const show = (e) => {
+    onFocus?.(e);
+    setShouldShow(true);
+  };
+  const hide = (e) => {
+    onBlur?.(e);
+    setShouldShow(false);
+  };
+  const exitDelay = import_unitless.default.MOTION_DURATION_FAST * 1e3;
+  const defaultAppearance = appearance || (typeof content === "object" ? "box" : "pill");
+  (0, import_react.useEffect)(() => {
+    const documentBody = document.body;
+    let timeout;
+    const onEsc = (e) => {
+      if (["Escape", "Esc"].includes(e.key)) {
+        setIsOpen(false);
+        setShouldShow(false);
+      }
+    };
+    if (shouldShow) {
+      timeout = setTimeout(() => setIsOpen(true), enterDelay);
+    } else {
+      timeout = setTimeout(() => {
+        setIsOpen(false);
+      }, exitDelay);
+    }
+    if (isOpen) {
+      documentBody.addEventListener("keydown", onEsc, { capture: true });
+    }
+    return () => {
+      documentBody.removeEventListener("keydown", onEsc, { capture: true });
+      clearTimeout(timeout);
+    };
+  }, [isOpen, setShouldShow, shouldShow, enterDelay, exitDelay]);
+  const TooltipContent = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    TooltipBubble,
+    {
+      appearance: defaultAppearance,
+      onFocus: show,
+      onBlur: hide,
+      "aria-expanded": isOpen,
+      id,
+      ...rest,
+      children: content
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_seeds_react_popout.default,
+    {
+      content: !isInvalidContent ? TooltipContent : void 0,
+      isOpen,
+      placement,
+      qa: {
+        "data-qa-tooltip": id,
+        ...qa
+      },
+      id: id + "-wrapper",
+      focusOnContent: false,
+      zIndex,
+      "aria-haspopup": "false",
+      display: truncated ? "flex" : void 0,
+      disableWrapperAria: true,
+      ...popoutProps,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "span",
+        {
+          onBlur: hide,
+          onFocus: show,
+          onMouseEnter: show,
+          onMouseLeave: hide,
+          style: truncated ? {
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap"
+          } : {},
+          children: React.isValidElement(children) ? React.cloneElement(children, {
+            //** There may be cases where the Tooltip's child needs to properly describe its role as expanding a drawer, in which case that propery takes priority */
+            "aria-expanded": hasAttribute(children, "aria-expanded") ? children.props["aria-expanded"] : isOpen,
+            "aria-describedby": id
+          }) : children
+        }
+      )
+    }
+  );
+};
+var Tooltip_default = Tooltip;
+
+// src/TooltipTypes.ts
+var React2 = require("react");
+
+// src/index.ts
+var src_default = Tooltip_default;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Tooltip
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/Tooltip.tsx","../src/styles.ts","../src/TooltipTypes.ts"],"sourcesContent":["import Tooltip from \"./Tooltip\";\n\nexport default Tooltip;\nexport { Tooltip };\nexport * from \"./TooltipTypes\";\n","import * as React from \"react\";\nimport { useState, useEffect } from \"react\";\nimport MOTION from \"@sproutsocial/seeds-motion/unitless\";\nimport Popout from \"@sproutsocial/seeds-react-popout\";\nimport { StyledTooltipContent } from \"./styles\";\nimport type { TypeTooltipProps, TypeTooltipContent } from \"./TooltipTypes\";\n\nlet idCounter = 0;\n\nconst hasAttribute = (child: React.ReactNode, attribute: string) => {\n  return React.isValidElement(child) && child.props[attribute] !== undefined;\n};\n\n/** Tooltip Styled Popout wrapper for handling events */\nconst TooltipBubble = ({\n  appearance = \"pill\",\n  children,\n  onFocus,\n  onBlur,\n  ...rest\n}: TypeTooltipContent) => {\n  // @ts-ignore Will fix during refactor\n  const handleFocus = (e) => {\n    onFocus(e);\n  };\n  // @ts-ignore Will fix during refactor\n  const handleBlur = (e) => {\n    onBlur(e);\n  };\n  return (\n    <StyledTooltipContent\n      role=\"tooltip\"\n      appearance={appearance}\n      borderRadius={appearance === \"box\" ? 500 : \"5000em\"}\n      px={400}\n      py={appearance === \"box\" ? 400 : 200}\n      m={200}\n      color=\"text.body\"\n      bg=\"container.background.base\"\n      boxShadow=\"medium\"\n      border={500}\n      borderColor=\"container.border.base\"\n      onFocus={handleFocus}\n      onBlur={handleBlur}\n      onMouseEnter={handleFocus}\n      onMouseLeave={handleBlur}\n      tabIndex={0}\n      {...rest}\n    >\n      {children}\n    </StyledTooltipContent>\n  );\n};\n\n/** Core component */\nconst Tooltip = ({\n  content,\n  children,\n  enterDelay = MOTION.MOTION_DURATION_FAST * 1000,\n  placement = \"auto\",\n  appearance,\n  zIndex = 7,\n  qa,\n  popoutProps,\n  truncated = false,\n  onFocus,\n  onBlur,\n  ...rest\n}: TypeTooltipProps) => {\n  const [shouldShow, setShouldShow] = useState(false);\n  const [isOpen, setIsOpen] = useState(false);\n  const [id] = useState(`Racine-tooltip-${idCounter++}`);\n  const isInvalidContent = content === null || content === undefined;\n\n  // @ts-ignore Will fix during refactor\n  const show = (e) => {\n    onFocus?.(e);\n    setShouldShow(true);\n  };\n  // @ts-ignore Will fix during refactor\n  const hide = (e) => {\n    onBlur?.(e);\n    setShouldShow(false);\n  };\n\n  const exitDelay = MOTION.MOTION_DURATION_FAST * 1000;\n  const defaultAppearance =\n    appearance || (typeof content === \"object\" ? \"box\" : \"pill\");\n\n  /** Handles all the logic around whether to display/not display */\n  useEffect(() => {\n    const documentBody = document.body;\n    let timeout;\n    const onEsc = (e: KeyboardEvent): void => {\n      // older browsers use \"Esc\"\n      if ([\"Escape\", \"Esc\"].includes(e.key)) {\n        setIsOpen(false);\n        setShouldShow(false);\n      }\n    };\n\n    if (shouldShow) {\n      timeout = setTimeout(() => setIsOpen(true), enterDelay);\n    } else {\n      timeout = setTimeout(() => {\n        setIsOpen(false);\n      }, exitDelay);\n    }\n\n    // We only want listeners from the tooltip if its open in the first place\n    if (isOpen) {\n      documentBody.addEventListener(\"keydown\", onEsc, { capture: true });\n    }\n    return () => {\n      documentBody.removeEventListener(\"keydown\", onEsc, { capture: true });\n      clearTimeout(timeout);\n    };\n  }, [isOpen, setShouldShow, shouldShow, enterDelay, exitDelay]);\n\n  /** The wrapped content of whats inside the Tooltip */\n  const TooltipContent = () => (\n    <TooltipBubble\n      appearance={defaultAppearance}\n      onFocus={show}\n      onBlur={hide}\n      aria-expanded={isOpen}\n      id={id}\n      {...rest}\n    >\n      {content}\n    </TooltipBubble>\n  );\n\n  return (\n    <Popout\n      content={!isInvalidContent ? TooltipContent : undefined}\n      isOpen={isOpen}\n      placement={placement}\n      qa={{\n        \"data-qa-tooltip\": id,\n        ...qa,\n      }}\n      id={id + \"-wrapper\"}\n      focusOnContent={false}\n      zIndex={zIndex}\n      aria-haspopup=\"false\"\n      display={truncated ? \"flex\" : undefined}\n      disableWrapperAria={true} // required so that the child span doesnt take in redundant aria props\n      {...popoutProps}\n    >\n      <span\n        onBlur={hide}\n        onFocus={show}\n        onMouseEnter={show}\n        onMouseLeave={hide}\n        style={\n          truncated\n            ? {\n                overflow: \"hidden\",\n                textOverflow: \"ellipsis\",\n                whiteSpace: \"nowrap\",\n              }\n            : {}\n        }\n      >\n        {React.isValidElement(children)\n          ? React.cloneElement(children as React.ReactElement, {\n              //** There may be cases where the Tooltip's child needs to properly describe its role as expanding a drawer, in which case that propery takes priority */\n              \"aria-expanded\": hasAttribute(children, \"aria-expanded\")\n                ? children.props[\"aria-expanded\"]\n                : isOpen,\n              \"aria-describedby\": id,\n            })\n          : children}\n      </span>\n    </Popout>\n  );\n};\n\nexport default Tooltip;\n","import styled from \"styled-components\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport type { TypeTooltipContent } from \"./TooltipTypes\";\n\nexport const StyledTooltipContent = styled(Box)<\n  Pick<TypeTooltipContent, \"appearance\">\n>`\n  font-family: ${(props) => props.theme.fontFamily};\n  ${(props) => props.theme.typography[200]}\n  text-align: ${(props) => (props.appearance === \"box\" ? \"left\" : \"center\")};\n`;\n","import * as React from \"react\";\nimport type { TypePopoutProps } from \"@sproutsocial/seeds-react-popout\";\nimport type { TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\n\nexport interface TypeTooltipProps\n  extends Omit<\n    TypeBoxProps,\n    \"children\" | \"content\" | \"onMouseEnter\" | \"onMouseLeave\"\n  > {\n  /** The content that the tooltip should be attached to. Hovering or focusing this element will cause the tooltip to appear */\n  children: React.ReactNode;\n\n  /** The content to be displayed within the tooltip. If there is no content, just the children are rendered */\n  content: React.ReactNode;\n\n  /** The placement of the tooltip in relation to the children */\n  placement?: TypePopoutProps[\"placement\"];\n\n  /** The time (in ms) that a user has to be hovered/focused before the tooltip will appear  */\n  enterDelay?: number;\n\n  /** Used to override the appearance of the Tooltip content. By default, strings will have the 'pill' appearance, and more complex content will have the 'box' appearance. You can change those defaults by setting this prop. */\n  appearance?: \"pill\" | \"box\";\n  qa?: object;\n  zIndex?: number;\n\n  /** Props to be spread onto the underlying Popout component */\n  popoutProps?: Partial<TypePopoutProps>;\n\n  /** Truncates text into a single line with ellipsis */\n  truncated?: boolean;\n\n  ariaProps?: Record<string, string>;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\nexport interface TypeTooltipContent\n  extends Pick<TypeTooltipProps, \"appearance\" | \"children\"> {\n  onFocus: (e: React.FocusEvent<HTMLDivElement, FocusEvent>) => void;\n  onBlur: (e: React.FocusEvent<HTMLDivElement, FocusEvent>) => void;\n}\n"],"mappings":"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","names":["styled","Box","MOTION","Popout","React"]}

package/jest.config.js

@@ -0,0 +1,9 @@
+const baseConfig = require("@sproutsocial/seeds-testing");
+
+/** * @type {import('jest').Config} */
+const config = {
+  ...baseConfig,
+  displayName: "seeds-react-tooltip",
+};
+
+module.exports = config;

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@sproutsocial/seeds-react-tooltip",
+  "version": "1.0.0",
+  "description": "Seeds React Tooltip",
+  "author": "Sprout Social, Inc.",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsup --dts",
+    "build:debug": "tsup --dts --metafile",
+    "dev": "tsup --watch --dts",
+    "clean": "rm -rf .turbo dist",
+    "clean:modules": "rm -rf node_modules",
+    "typecheck": "tsc --noEmit",
+    "test": "jest",
+    "test:watch": "jest --watch --coverage=false"
+  },
+  "dependencies": {
+    "@sproutsocial/seeds-react-theme": "*",
+    "@sproutsocial/seeds-react-system-props": "*",
+    "@sproutsocial/seeds-react-popout": "*",
+    "@sproutsocial/seeds-react-box": "*",
+    "@sproutsocial/seeds-motion": "*"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/styled-components": "^5.1.26",
+    "@sproutsocial/eslint-config-seeds": "*",
+    "react": "^18.0.0",
+    "styled-components": "^5.2.3",
+    "tsup": "^8.0.2",
+    "typescript": "^5.6.2",
+    "@sproutsocial/seeds-tsconfig": "*",
+    "@sproutsocial/seeds-testing": "*",
+    "@sproutsocial/seeds-react-testing-library": "*",
+    "@sproutsocial/seeds-react-icon": "*",
+    "@sproutsocial/seeds-react-banner": "*",
+    "@sproutsocial/seeds-react-button": "*",
+    "@sproutsocial/seeds-react-text": "*",
+    "@sproutsocial/seeds-react-portal": "*"
+  },
+  "peerDependencies": {
+    "styled-components": "^5.2.3"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}

package/src/Tooltip.stories.tsx

@@ -0,0 +1,129 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Banner from "@sproutsocial/seeds-react-banner";
+import Box from "@sproutsocial/seeds-react-box";
+import Button from "@sproutsocial/seeds-react-button";
+import Icon from "@sproutsocial/seeds-react-icon";
+import Tooltip from "./Tooltip";
+
+const meta: Meta<typeof Tooltip> = {
+  title: "Components/Tooltip",
+  component: Tooltip,
+};
+export default meta;
+
+type Story = StoryObj<typeof Tooltip>;
+
+export const Default: Story = {
+  render: () => (
+    <>
+      <Box mb={400}>
+        <Banner text="Tooltips should be applied only to interactive elements, allowing users to launch them via focus or mouse hover." />
+      </Box>
+      <Box
+        width="100%"
+        p={600}
+        alignItems="center"
+        justifyContent="center"
+        display="flex"
+        height="200px"
+      >
+        <Tooltip content="This is a tooltip. It is a small piece of text that is shown when a user hovers or focuses over an element.">
+          <Button appearance="primary">show tooltip</Button>
+        </Tooltip>
+      </Box>
+    </>
+  ),
+};
+
+export const Focus: Story = {
+  render: () => (
+    <Box
+      width="100%"
+      p={600}
+      alignItems="center"
+      justifyContent="center"
+      display="flex"
+      height="200px"
+      color="text.body"
+    >
+      We've got some text and then we've got a focusable
+      <Tooltip content="I'm a tooltip">
+        <Button mx={300} appearance="primary">
+          button
+        </Button>
+      </Tooltip>
+      and then some more text
+    </Box>
+  ),
+};
+
+export const WithNonStringContent: Story = {
+  render: () => (
+    <Box
+      width="100%"
+      p={600}
+      alignItems="center"
+      justifyContent="center"
+      display="flex"
+      height="200px"
+    >
+      <Tooltip
+        content={
+          <img
+            src="https://pixel.nymag.com/imgs/daily/vulture/2016/11/03/03-steven-seagal.w330.h330.jpg"
+            alt="a cool guy"
+            width="200"
+          />
+        }
+      >
+        <Button appearance="primary">show tooltip</Button>
+      </Tooltip>
+    </Box>
+  ),
+};
+
+export const WithIcon: Story = {
+  render: () => (
+    <Box
+      width="100%"
+      p={600}
+      alignItems="center"
+      justifyContent="center"
+      display="flex"
+      height="200px"
+    >
+      <Tooltip content="This is a button's tooltip">
+        <Button appearance="pill" ariaLabel="This is a button's label">
+          <Icon name="circle-check-outline" aria-hidden />
+        </Button>
+      </Tooltip>
+    </Box>
+  ),
+};
+
+export const WithFocusableContent: Story = {
+  render: () => (
+    <Box
+      width="100%"
+      p={600}
+      alignItems="center"
+      justifyContent="center"
+      display="flex"
+      height="200px"
+    >
+      <Tooltip
+        content={
+          <Button
+            appearance="secondary"
+            width={1}
+            onClick={() => alert("clicked!")}
+          >
+            Tab to me
+          </Button>
+        }
+      >
+        <Button appearance="primary">show tooltip</Button>
+      </Tooltip>
+    </Box>
+  ),
+};

package/src/Tooltip.tsx

@@ -0,0 +1,180 @@
+import * as React from "react";
+import { useState, useEffect } from "react";
+import MOTION from "@sproutsocial/seeds-motion/unitless";
+import Popout from "@sproutsocial/seeds-react-popout";
+import { StyledTooltipContent } from "./styles";
+import type { TypeTooltipProps, TypeTooltipContent } from "./TooltipTypes";
+
+let idCounter = 0;
+
+const hasAttribute = (child: React.ReactNode, attribute: string) => {
+  return React.isValidElement(child) && child.props[attribute] !== undefined;
+};
+
+/** Tooltip Styled Popout wrapper for handling events */
+const TooltipBubble = ({
+  appearance = "pill",
+  children,
+  onFocus,
+  onBlur,
+  ...rest
+}: TypeTooltipContent) => {
+  // @ts-ignore Will fix during refactor
+  const handleFocus = (e) => {
+    onFocus(e);
+  };
+  // @ts-ignore Will fix during refactor
+  const handleBlur = (e) => {
+    onBlur(e);
+  };
+  return (
+    <StyledTooltipContent
+      role="tooltip"
+      appearance={appearance}
+      borderRadius={appearance === "box" ? 500 : "5000em"}
+      px={400}
+      py={appearance === "box" ? 400 : 200}
+      m={200}
+      color="text.body"
+      bg="container.background.base"
+      boxShadow="medium"
+      border={500}
+      borderColor="container.border.base"
+      onFocus={handleFocus}
+      onBlur={handleBlur}
+      onMouseEnter={handleFocus}
+      onMouseLeave={handleBlur}
+      tabIndex={0}
+      {...rest}
+    >
+      {children}
+    </StyledTooltipContent>
+  );
+};
+
+/** Core component */
+const Tooltip = ({
+  content,
+  children,
+  enterDelay = MOTION.MOTION_DURATION_FAST * 1000,
+  placement = "auto",
+  appearance,
+  zIndex = 7,
+  qa,
+  popoutProps,
+  truncated = false,
+  onFocus,
+  onBlur,
+  ...rest
+}: TypeTooltipProps) => {
+  const [shouldShow, setShouldShow] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
+  const [id] = useState(`Racine-tooltip-${idCounter++}`);
+  const isInvalidContent = content === null || content === undefined;
+
+  // @ts-ignore Will fix during refactor
+  const show = (e) => {
+    onFocus?.(e);
+    setShouldShow(true);
+  };
+  // @ts-ignore Will fix during refactor
+  const hide = (e) => {
+    onBlur?.(e);
+    setShouldShow(false);
+  };
+
+  const exitDelay = MOTION.MOTION_DURATION_FAST * 1000;
+  const defaultAppearance =
+    appearance || (typeof content === "object" ? "box" : "pill");
+
+  /** Handles all the logic around whether to display/not display */
+  useEffect(() => {
+    const documentBody = document.body;
+    let timeout;
+    const onEsc = (e: KeyboardEvent): void => {
+      // older browsers use "Esc"
+      if (["Escape", "Esc"].includes(e.key)) {
+        setIsOpen(false);
+        setShouldShow(false);
+      }
+    };
+
+    if (shouldShow) {
+      timeout = setTimeout(() => setIsOpen(true), enterDelay);
+    } else {
+      timeout = setTimeout(() => {
+        setIsOpen(false);
+      }, exitDelay);
+    }
+
+    // We only want listeners from the tooltip if its open in the first place
+    if (isOpen) {
+      documentBody.addEventListener("keydown", onEsc, { capture: true });
+    }
+    return () => {
+      documentBody.removeEventListener("keydown", onEsc, { capture: true });
+      clearTimeout(timeout);
+    };
+  }, [isOpen, setShouldShow, shouldShow, enterDelay, exitDelay]);
+
+  /** The wrapped content of whats inside the Tooltip */
+  const TooltipContent = () => (
+    <TooltipBubble
+      appearance={defaultAppearance}
+      onFocus={show}
+      onBlur={hide}
+      aria-expanded={isOpen}
+      id={id}
+      {...rest}
+    >
+      {content}
+    </TooltipBubble>
+  );
+
+  return (
+    <Popout
+      content={!isInvalidContent ? TooltipContent : undefined}
+      isOpen={isOpen}
+      placement={placement}
+      qa={{
+        "data-qa-tooltip": id,
+        ...qa,
+      }}
+      id={id + "-wrapper"}
+      focusOnContent={false}
+      zIndex={zIndex}
+      aria-haspopup="false"
+      display={truncated ? "flex" : undefined}
+      disableWrapperAria={true} // required so that the child span doesnt take in redundant aria props
+      {...popoutProps}
+    >
+      <span
+        onBlur={hide}
+        onFocus={show}
+        onMouseEnter={show}
+        onMouseLeave={hide}
+        style={
+          truncated
+            ? {
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+              }
+            : {}
+        }
+      >
+        {React.isValidElement(children)
+          ? React.cloneElement(children as React.ReactElement, {
+              //** There may be cases where the Tooltip's child needs to properly describe its role as expanding a drawer, in which case that propery takes priority */
+              "aria-expanded": hasAttribute(children, "aria-expanded")
+                ? children.props["aria-expanded"]
+                : isOpen,
+              "aria-describedby": id,
+            })
+          : children}
+      </span>
+    </Popout>
+  );
+};
+
+export default Tooltip;

package/src/TooltipTypes.ts

@@ -0,0 +1,41 @@
+import * as React from "react";
+import type { TypePopoutProps } from "@sproutsocial/seeds-react-popout";
+import type { TypeBoxProps } from "@sproutsocial/seeds-react-box";
+
+export interface TypeTooltipProps
+  extends Omit<
+    TypeBoxProps,
+    "children" | "content" | "onMouseEnter" | "onMouseLeave"
+  > {
+  /** The content that the tooltip should be attached to. Hovering or focusing this element will cause the tooltip to appear */
+  children: React.ReactNode;
+
+  /** The content to be displayed within the tooltip. If there is no content, just the children are rendered */
+  content: React.ReactNode;
+
+  /** The placement of the tooltip in relation to the children */
+  placement?: TypePopoutProps["placement"];
+
+  /** The time (in ms) that a user has to be hovered/focused before the tooltip will appear  */
+  enterDelay?: number;
+
+  /** Used to override the appearance of the Tooltip content. By default, strings will have the 'pill' appearance, and more complex content will have the 'box' appearance. You can change those defaults by setting this prop. */
+  appearance?: "pill" | "box";
+  qa?: object;
+  zIndex?: number;
+
+  /** Props to be spread onto the underlying Popout component */
+  popoutProps?: Partial<TypePopoutProps>;
+
+  /** Truncates text into a single line with ellipsis */
+  truncated?: boolean;
+
+  ariaProps?: Record<string, string>;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface TypeTooltipContent
+  extends Pick<TypeTooltipProps, "appearance" | "children"> {
+  onFocus: (e: React.FocusEvent<HTMLDivElement, FocusEvent>) => void;
+  onBlur: (e: React.FocusEvent<HTMLDivElement, FocusEvent>) => void;
+}

package/src/__tests__/Tooltip.test.tsx

@@ -0,0 +1,194 @@
+/* eslint-disable testing-library/no-unnecessary-act */
+import React from "react";
+import {
+  render,
+  screen,
+  fireEvent,
+  act,
+} from "@sproutsocial/seeds-react-testing-library";
+import Icon from "@sproutsocial/seeds-react-icon";
+import Tooltip from "../Tooltip";
+import Button from "@sproutsocial/seeds-react-button";
+
+jest.mock("popper.js", () => {
+  const PopperJS = jest.requireActual("popper.js");
+  const mockDestroy = jest.fn();
+  const mockScheduleUpdate = jest.fn();
+
+  return class Popper {
+    static placements = PopperJS.placements;
+
+    constructor() {
+      return {
+        destroy: mockDestroy,
+        scheduleUpdate: mockScheduleUpdate,
+      };
+    }
+  };
+});
+
+jest.mock(
+  "@sproutsocial/seeds-react-portal",
+  () =>
+    ({ children }: { children: React.ReactNode }) =>
+      <div>{children}</div>
+);
+describe("Tooltip", () => {
+  describe("rendering all valid `React.Node`s", () => {
+    it("should render string content", async () => {
+      const contentText = "hey";
+      render(<Tooltip content={contentText}>hi</Tooltip>);
+      // This will cause a console error (but still pass) until react 16.9
+      act(() => {
+        fireEvent.mouseOver(screen.getByText("hi"));
+      });
+      await screen.findByText(contentText);
+      expect(screen.getByText(contentText)).toBeInTheDocument();
+
+      // TODO
+      // await runA11yCheck();
+    });
+
+    it("should render number content", async () => {
+      const contentText = 123;
+      render(<Tooltip content={contentText}>hi</Tooltip>);
+      act(() => {
+        fireEvent.mouseOver(screen.getByText("hi"));
+      });
+      await screen.findByDataQaLabel({
+        "popout-isopen": "true",
+      });
+      expect(screen.getByText(`${contentText}`)).toBeInTheDocument();
+    });
+
+    it("should render React Element content", async () => {
+      render(<Tooltip content={<p>hey</p>}>hi</Tooltip>);
+      act(() => {
+        fireEvent.mouseOver(screen.getByText("hi"));
+      });
+      await screen.findByDataQaLabel({
+        "popout-isopen": "true",
+      });
+      expect(screen.getByText("hey")).toBeInTheDocument();
+    });
+
+    it("should render $Iterable<string> content", async () => {
+      render(<Tooltip content={["hello", "world"]}>hi</Tooltip>);
+      act(() => {
+        fireEvent.mouseOver(screen.getByText("hi"));
+      });
+      await screen.findByText(/hello/i);
+      expect(screen.getByText(/hello/i)).toBeInTheDocument();
+      await screen.findByText(/world/i);
+      expect(screen.getByText(/world/i)).toBeInTheDocument();
+    });
+
+    it("should render $Iterable<React$Element<any>> content", async () => {
+      render(
+        <Tooltip content={[<p key="1">hello</p>, <p key="2">world</p>]}>
+          hi
+        </Tooltip>
+      );
+      act(() => {
+        fireEvent.mouseOver(screen.getByText("hi"));
+      });
+      await screen.findByText(/hello/i);
+      expect(screen.getByText(/hello/i)).toBeInTheDocument();
+      await screen.findByText(/world/i);
+      expect(screen.getByText(/world/i)).toBeInTheDocument();
+    });
+
+    it("should not render null content", async () => {
+      expect.assertions(1);
+      render(<Tooltip content={null}>hi</Tooltip>);
+      act(() => {
+        fireEvent.mouseOver(screen.getByText("hi"));
+      });
+      // @see https://jestjs.io/docs/tutorial-async#rejects
+      await expect(
+        screen.findByDataQaLabel({
+          "popout-isopen": "true",
+        })
+      ).rejects.toBeTruthy();
+    });
+
+    it("should not render undefined content", async () => {
+      expect.assertions(1);
+      render(<Tooltip content={undefined}>hi</Tooltip>);
+      act(() => {
+        fireEvent.mouseOver(screen.getByText("hi"));
+      });
+      // @see https://jestjs.io/docs/tutorial-async#rejects
+      await expect(
+        screen.findByDataQaLabel({
+          "popout-isopen": "true",
+        })
+      ).rejects.toBeTruthy();
+    });
+
+    it("should render as aria-expanded if tooltip is hovered", async () => {
+      render(
+        <Tooltip content="hello">
+          <Button role="button" onClick={() => {}}>
+            hi
+          </Button>
+        </Tooltip>
+      );
+      // Hover over
+      act(() => {
+        fireEvent.mouseOver(screen.getByText("hi"));
+      });
+      // Wait for tooltip
+      await screen.findByText(/hello/i);
+      // check if expanded
+      expect(
+        screen.getByRole("button", {
+          expanded: true,
+        })
+      ).toBeInTheDocument();
+    });
+
+    it("should not render as aria-expanded if child already defines one", async () => {
+      render(
+        <Tooltip content="hello">
+          <Button aria-expanded="false" role="button" onClick={() => {}}>
+            hi
+          </Button>
+        </Tooltip>
+      );
+      // Hover over
+      act(() => {
+        fireEvent.mouseOver(screen.getByText("hi"));
+      });
+      // Wait for tooltip
+      await screen.findByText(/hello/i);
+      // check if expanded
+      expect(
+        screen.getByRole("button", {
+          expanded: false,
+        })
+      ).toBeInTheDocument();
+    });
+  });
+
+  it("should render when wrapped around an icon", async () => {
+    render(
+      <Tooltip content="hey">
+        <Icon
+          data-testid="icon"
+          name="globe-outline"
+          aria-label="Open Tooltip"
+        />
+      </Tooltip>
+    );
+    // This will cause a console error (but still pass) until react 16.9
+    act(() => {
+      fireEvent.mouseOver(screen.getByTestId("icon"));
+    });
+    await expect(
+      screen.findByDataQaLabel({
+        "popout-isopen": "true",
+      })
+    ).resolves.toBeTruthy();
+  });
+});

package/src/__tests__/Tooltip.typetest.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+import Tooltip from "../Tooltip";
+import { Text } from "@sproutsocial/seeds-react-text";
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function TooltipTypes() {
+  return (
+    <>
+      <Tooltip content="This is a tooltip on a text element">
+        <Text>Hello World</Text>
+      </Tooltip>
+      <Tooltip onFocus={() => {}} content="This is a tooltip on a text element">
+        <Text>Hello World</Text>
+      </Tooltip>
+      <Tooltip
+        content="foo"
+        ariaProps={{
+          role: "link",
+        }}
+      >
+        <Text>Yo</Text>
+      </Tooltip>
+      {/* @ts-expect-error - test that invalid props are rejected */}
+      <Tooltip />
+    </>
+  );
+}

package/src/index.ts

@@ -0,0 +1,5 @@
+import Tooltip from "./Tooltip";
+
+export default Tooltip;
+export { Tooltip };
+export * from "./TooltipTypes";

package/src/styled.d.ts

@@ -0,0 +1,7 @@
+import "styled-components";
+import { TypeTheme } from "@sproutsocial/seeds-react-theme";
+
+declare module "styled-components" {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface DefaultTheme extends TypeTheme {}
+}

package/src/styles.ts

@@ -0,0 +1,11 @@
+import styled from "styled-components";
+import Box from "@sproutsocial/seeds-react-box";
+import type { TypeTooltipContent } from "./TooltipTypes";
+
+export const StyledTooltipContent = styled(Box)<
+  Pick<TypeTooltipContent, "appearance">
+>`
+  font-family: ${(props) => props.theme.fontFamily};
+  ${(props) => props.theme.typography[200]}
+  text-align: ${(props) => (props.appearance === "box" ? "left" : "center")};
+`;

package/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "@sproutsocial/seeds-tsconfig/bundler/dom/library-monorepo",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "module": "esnext"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist", "coverage"]
+}

package/tsup.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig((options) => ({
+  entry: ["src/index.ts"],
+  format: ["cjs", "esm"],
+  clean: true,
+  legacyOutput: true,
+  dts: options.dts,
+  external: ["react"],
+  sourcemap: true,
+  metafile: options.metafile,
+}));