tooltip: cleanup component body (#89835)

Move tooltip under components/core and make it chonky.

There is a small detail here under the arrow that is missing, but this
seems to be using some sort of hand generated SVG, and it doesn't seem
trivial to update.

![CleanShot 2025-04-16 at 21 53
08@2x](https://github.com/user-attachments/assets/bbc320f1-ebc2-4dab-ad20-c63cdc2ad356)

![CleanShot 2025-04-16 at 21 53
16@2x](https://github.com/user-attachments/assets/9b860a6f-2f20-4fd6-b3c8-aaf540f554ac)

Author: JonasBa

static/app/components/acl/demoModeDisabled.tsx

@@ -1,4 +1,4 @@
-import {Tooltip} from 'sentry/components/tooltip';
+import {Tooltip} from 'sentry/components/core/tooltip';
 import {t} from 'sentry/locale';
 import {isDemoModeActive} from 'sentry/utils/demoMode';
 

static/app/components/actions/resolve.tsx

@@ -6,11 +6,11 @@ import {openModal} from 'sentry/actionCreators/modal';
 import {openConfirmModal} from 'sentry/components/confirm';
 import {Button, LinkButton} from 'sentry/components/core/button';
 import {ButtonBar} from 'sentry/components/core/button/buttonBar';
+import {Tooltip} from 'sentry/components/core/tooltip';
 import CustomCommitsResolutionModal from 'sentry/components/customCommitsResolutionModal';
 import CustomResolutionModal from 'sentry/components/customResolutionModal';
 import type {MenuItemProps} from 'sentry/components/dropdownMenu';
 import {DropdownMenu} from 'sentry/components/dropdownMenu';
-import {Tooltip} from 'sentry/components/tooltip';
 import {IconChevron, IconReleases} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';

static/app/components/alerts/onDemandMetricAlert.tsx

@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 
 import {Alert} from 'sentry/components/core/alert';
 import {Button} from 'sentry/components/core/button';
-import {Tooltip} from 'sentry/components/tooltip';
+import {Tooltip} from 'sentry/components/core/tooltip';
 import {IconClose, IconWarning} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import type {Color} from 'sentry/utils/theme';

static/app/components/assigneeBadge.tsx

@@ -4,10 +4,10 @@ import styled from '@emotion/styled';
 
 import {ActorAvatar} from 'sentry/components/core/avatar/actorAvatar';
 import {Tag} from 'sentry/components/core/badge/tag';
+import {Tooltip} from 'sentry/components/core/tooltip';
 import ExternalLink from 'sentry/components/links/externalLink';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
 import Placeholder from 'sentry/components/placeholder';
-import {Tooltip} from 'sentry/components/tooltip';
 import {IconChevron} from 'sentry/icons';
 import {t, tct} from 'sentry/locale';
 import {space} from 'sentry/styles/space';

static/app/components/assigneeSelectorDropdown.tsx

@@ -10,13 +10,13 @@ import {
   type SelectOption,
   type SelectOptionOrSection,
 } from 'sentry/components/core/compactSelect';
+import {Tooltip} from 'sentry/components/core/tooltip';
 import DropdownButton from 'sentry/components/dropdownButton';
 import {TeamBadge} from 'sentry/components/idBadge/teamBadge';
 import UserBadge from 'sentry/components/idBadge/userBadge';
 import ExternalLink from 'sentry/components/links/externalLink';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
 import SuggestedAvatarStack from 'sentry/components/suggestedAvatarStack';
-import {Tooltip} from 'sentry/components/tooltip';
 import {IconAdd, IconUser} from 'sentry/icons';
 import {t, tct, tn} from 'sentry/locale';
 import MemberListStore from 'sentry/stores/memberListStore';

static/app/components/badge/groupPriority.tsx

@@ -8,12 +8,12 @@ import {usePrompt} from 'sentry/actionCreators/prompts';
 import {IconCellSignal} from 'sentry/components/badge/iconCellSignal';
 import {Tag} from 'sentry/components/core/badge/tag';
 import {Button, LinkButton} from 'sentry/components/core/button';
+import {Tooltip} from 'sentry/components/core/tooltip';
 import type {MenuItemProps} from 'sentry/components/dropdownMenu';
 import {DropdownMenu} from 'sentry/components/dropdownMenu';
 import {DropdownMenuFooter} from 'sentry/components/dropdownMenu/footer';
 import HookOrDefault from 'sentry/components/hookOrDefault';
 import Placeholder from 'sentry/components/placeholder';
-import {Tooltip} from 'sentry/components/tooltip';
 import {IconChevron, IconClose} from 'sentry/icons';
 import {t, tct} from 'sentry/locale';
 import {space} from 'sentry/styles/space';

static/app/components/charts/baseChart.tsx

@@ -51,8 +51,11 @@ import {isChonkTheme} from 'sentry/utils/theme/withChonk';
 
 import Grid from './components/grid';
 import Legend from './components/legend';
-import type {TooltipSubLabel} from './components/tooltip';
-import {CHART_TOOLTIP_VIEWPORT_OFFSET, computeChartTooltip} from './components/tooltip';
+import {
+  CHART_TOOLTIP_VIEWPORT_OFFSET,
+  computeChartTooltip,
+  type TooltipSubLabel,
+} from './components/tooltip';
 import XAxis from './components/xAxis';
 import YAxis from './components/yAxis';
 import LineSeries from './series/lineSeries';

static/app/components/charts/breakdownBars.tsx

@@ -1,7 +1,7 @@
 import {Fragment} from 'react';
 import styled from '@emotion/styled';
 
-import {Tooltip} from 'sentry/components/tooltip';
+import {Tooltip} from 'sentry/components/core/tooltip';
 import {space} from 'sentry/styles/space';
 import {formatPercentage} from 'sentry/utils/number/formatPercentage';
 

static/app/components/charts/simpleTableChart.tsx

@@ -3,9 +3,9 @@ import {css, useTheme} from '@emotion/react';
 import styled from '@emotion/styled';
 import type {Location} from 'history';
 
+import {Tooltip} from 'sentry/components/core/tooltip';
 import type {PanelTableProps} from 'sentry/components/panels/panelTable';
 import {PanelTable, PanelTableHeader} from 'sentry/components/panels/panelTable';
-import {Tooltip} from 'sentry/components/tooltip';
 import Truncate from 'sentry/components/truncate';
 import {space} from 'sentry/styles/space';
 import type {Organization} from 'sentry/types/organization';

static/app/components/checkInTimeline/checkInTimeline.tsx

@@ -1,8 +1,8 @@
 import {css} from '@emotion/react';
 import styled from '@emotion/styled';
 
+import {Tooltip} from 'sentry/components/core/tooltip';
 import {DateTime} from 'sentry/components/dateTime';
-import {Tooltip} from 'sentry/components/tooltip';
 import {tn} from 'sentry/locale';
 
 import {getAggregateStatus} from './utils/getAggregateStatus';

static/app/components/checkInTimeline/checkInTooltip.tsx

@@ -1,10 +1,10 @@
 import {Fragment} from 'react';
 import styled from '@emotion/styled';
 
+import type {TooltipProps} from 'sentry/components/core/tooltip';
+import {Tooltip} from 'sentry/components/core/tooltip';
 import {DateTime} from 'sentry/components/dateTime';
 import Text from 'sentry/components/text';
-import type {TooltipProps} from 'sentry/components/tooltip';
-import {Tooltip} from 'sentry/components/tooltip';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {ColorOrAlias} from 'sentry/utils/theme';

static/app/components/commitRow.tsx

@@ -6,13 +6,13 @@ import {openInviteMembersModal} from 'sentry/actionCreators/modal';
 import CommitLink from 'sentry/components/commitLink';
 import {UserAvatar} from 'sentry/components/core/avatar/userAvatar';
 import {LinkButton} from 'sentry/components/core/button';
+import {Tooltip} from 'sentry/components/core/tooltip';
 import {Hovercard} from 'sentry/components/hovercard';
 import ExternalLink from 'sentry/components/links/externalLink';
 import Link from 'sentry/components/links/link';
 import PanelItem from 'sentry/components/panels/panelItem';
 import TextOverflow from 'sentry/components/textOverflow';
 import TimeSince from 'sentry/components/timeSince';
-import {Tooltip} from 'sentry/components/tooltip';
 import Version from 'sentry/components/version';
 import VersionHoverCard from 'sentry/components/versionHoverCard';
 import {IconQuestion, IconWarning} from 'sentry/icons';

static/app/components/core/avatar/avatarList.tsx

@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 
 import {TeamAvatar} from 'sentry/components/core/avatar/teamAvatar';
 import {UserAvatar, type UserAvatarProps} from 'sentry/components/core/avatar/userAvatar';
-import {Tooltip} from 'sentry/components/tooltip';
+import {Tooltip} from 'sentry/components/core/tooltip';
 import {space} from 'sentry/styles/space';
 import type {Actor} from 'sentry/types/core';
 import type {Team} from 'sentry/types/organization';

static/app/components/core/avatar/baseAvatar.tsx

@@ -6,7 +6,7 @@ import * as qs from 'query-string';
 
 import {Gravatar} from 'sentry/components/core/avatar/gravatar';
 import {LetterAvatar} from 'sentry/components/core/avatar/letterAvatar';
-import {Tooltip, type TooltipProps} from 'sentry/components/tooltip';
+import {Tooltip, type TooltipProps} from 'sentry/components/core/tooltip';
 import type {Avatar as AvatarType} from 'sentry/types/core';
 
 import {

static/app/components/core/avatar/projectAvatar.tsx

@@ -1,6 +1,6 @@
 import type {BaseAvatarProps} from 'sentry/components/core/avatar/baseAvatar';
+import {Tooltip} from 'sentry/components/core/tooltip';
 import {PlatformList} from 'sentry/components/platformList';
-import {Tooltip} from 'sentry/components/tooltip';
 import type {AvatarProject} from 'sentry/types/project';
 
 export interface ProjectAvatarProps extends BaseAvatarProps {

static/app/components/core/badge/deployBadge.tsx

@@ -1,8 +1,8 @@
 import styled from '@emotion/styled';
 
 import {Tag} from 'sentry/components/core/badge/tag';
+import {Tooltip} from 'sentry/components/core/tooltip';
 import Link from 'sentry/components/links/link';
-import {Tooltip} from 'sentry/components/tooltip';
 import {t} from 'sentry/locale';
 import type {Deploy} from 'sentry/types/release';
 import {MutableSearch} from 'sentry/utils/tokenizeSearch';

static/app/components/core/badge/featureBadge.tsx

@@ -3,8 +3,7 @@ import styled from '@emotion/styled';
 
 import CircleIndicator from 'sentry/components/circleIndicator';
 import {Badge, type BadgeProps} from 'sentry/components/core/badge';
-import type {TooltipProps} from 'sentry/components/tooltip';
-import {Tooltip} from 'sentry/components/tooltip';
+import {Tooltip, type TooltipProps} from 'sentry/components/core/tooltip';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import {chonkStyled} from 'sentry/utils/theme/theme.chonk';

static/app/components/core/button/index.tsx

@@ -6,9 +6,9 @@ import styled from '@emotion/styled';
 import {mergeRefs} from '@react-aria/utils';
 import type {LocationDescriptor} from 'history';
 
+import {Tooltip, type TooltipProps} from 'sentry/components/core/tooltip';
 import InteractionStateLayer from 'sentry/components/interactionStateLayer';
 import Link from 'sentry/components/links/link';
-import {Tooltip, type TooltipProps} from 'sentry/components/tooltip';
 import type {SVGIconProps} from 'sentry/icons/svgIcon';
 import {IconDefaultsProvider} from 'sentry/icons/useIconDefaults';
 import HookStore from 'sentry/stores/hookStore';

static/app/components/core/input/numberDragInput.tsx

@@ -2,7 +2,7 @@ import {useCallback, useRef} from 'react';
 import styled from '@emotion/styled';
 
 import {InputGroup, type InputProps} from 'sentry/components/core/input/inputGroup';
-import {Tooltip} from 'sentry/components/tooltip';
+import {Tooltip} from 'sentry/components/core/tooltip';
 import {IconArrow} from 'sentry/icons';
 import {tct} from 'sentry/locale';
 import {space} from 'sentry/styles/space';

static/app/components/core/menuListItem/index.tsx

@@ -15,10 +15,10 @@ import {
   ChonkLeadingItems,
   type Priority,
 } from 'sentry/components/core/menuListItem/index.chonk';
+import type {TooltipProps} from 'sentry/components/core/tooltip';
+import {Tooltip} from 'sentry/components/core/tooltip';
 import InteractionStateLayer from 'sentry/components/interactionStateLayer';
 import {Overlay, PositionWrapper} from 'sentry/components/overlay';
-import type {TooltipProps} from 'sentry/components/tooltip';
-import {Tooltip} from 'sentry/components/tooltip';
 import {space} from 'sentry/styles/space';
 import type {FormSize} from 'sentry/utils/theme';
 import {withChonk} from 'sentry/utils/theme/withChonk';

static/app/components/core/segmentedControl/index.tsx

@@ -11,9 +11,9 @@ import type {Node} from '@react-types/shared';
 import type {CollectionChildren} from '@react-types/shared/src/collections';
 import {LayoutGroup, motion} from 'framer-motion';
 
+import type {TooltipProps} from 'sentry/components/core/tooltip';
+import {Tooltip} from 'sentry/components/core/tooltip';
 import InteractionStateLayer from 'sentry/components/interactionStateLayer';
-import type {TooltipProps} from 'sentry/components/tooltip';
-import {Tooltip} from 'sentry/components/tooltip';
 import {space} from 'sentry/styles/space';
 import {defined} from 'sentry/utils';
 import type {FormSize} from 'sentry/utils/theme';

static/app/components/tooltip.spec.tsx renamed to static/app/components/core/tooltip/index.spec.tsx

@@ -1,6 +1,6 @@
 import {render, screen, userEvent, waitFor} from 'sentry-test/reactTestingLibrary';
 
-import {Tooltip} from 'sentry/components/tooltip';
+import {Tooltip} from 'sentry/components/core/tooltip';
 
 describe('Tooltip', function () {
   function mockOverflow(width: number, containerWidth: number) {

static/app/components/core/tooltip/index.stories.tsx

@@ -0,0 +1,55 @@
+import {Fragment} from 'react';
+
+import {Button} from 'sentry/components/core/button';
+import {Tooltip} from 'sentry/components/core/tooltip';
+import JSXProperty from 'sentry/components/stories/jsxProperty';
+import SideBySide from 'sentry/components/stories/sideBySide';
+import storyBook from 'sentry/stories/storyBook';
+
+// eslint-disable-next-line import/no-webpack-loader-syntax
+import types from '!!type-loader!sentry/components/core/tooltip';
+
+export default storyBook('Tooltip', (story, APIReference) => {
+  APIReference(types.Tooltip);
+
+  story('Default', () => {
+    return (
+      <Fragment>
+        <p>
+          Tooltip is a component that displays a tooltip when hovering over an element
+          (duh).
+        </p>
+        <p>
+          By default, a tooltip renders a wrapper around the children element and renders
+          the tooltip content in a portal. The wrapper can be skipped by passing the{' '}
+          <JSXProperty name="skipWrapper" value="true" /> prop.
+        </p>
+        <SideBySide>
+          <Tooltip title="Tooltip">
+            <Button>Hover me</Button>
+          </Tooltip>
+        </SideBySide>
+      </Fragment>
+    );
+  });
+
+  story('Hoverable Tooltip', () => {
+    return (
+      <Fragment>
+        <p>
+          A tooltip is not hoverable by default and will hide before the pointer enters
+          it's container - to make it hoverable, pass the{' '}
+          <JSXProperty name="isHoverable" value="true" /> prop.
+        </p>
+        <SideBySide>
+          <Tooltip title="This can be copied" isHoverable skipWrapper>
+            <Button>Hoverable Tooltip</Button>
+          </Tooltip>
+          <Tooltip title="This cannot be copied" skipWrapper>
+            <Button>Non Hoverable Tooltip</Button>
+          </Tooltip>
+        </SideBySide>
+      </Fragment>
+    );
+  });
+});