getsentry · TkDodo · May 28, 2026 · May 22, 2026 · May 22, 2026 · May 26, 2026
@@ -276,6 +276,8 @@ export default typescript.config([
     'src/sentry/templates/sentry/**/*',
     'stylelint.config.js',
     '.artifacts/**/*',
+    // auto-generated by figma code connect
+    '**/*.figma.tsx',
   ]),
   /**
    * Rules are grouped by plugin. If you want to override a specific rule inside
@@ -466,6 +468,7 @@ export default typescript.config([
     rules: {
       '@sentry/scraps/no-core-import': 'error',
       '@sentry/scraps/no-token-import': 'error',
+      '@sentry/scraps/prefer-info-text': 'error',
       '@sentry/scraps/use-semantic-token': [
         'error',
         {enabledCategories: ['background', 'border', 'content']},

@@ -2,25 +2,34 @@ import styled from '@emotion/styled';
 import type {DistributedOmit} from 'type-fest';
 
 import {Text, type TextProps} from '@sentry/scraps/text';
-import {Tooltip} from '@sentry/scraps/tooltip';
+import {Tooltip, type TooltipProps} from '@sentry/scraps/tooltip';
 
 type InfoTextProps<T extends 'span' | 'p' | 'label' | 'div'> = DistributedOmit<
   TextProps<T>,
-  'title'
+  'title' | 'variant'
 > & {
   title: React.ReactNode;
-};
+  variant?: TooltipProps['underlineColor'] | 'inherit';
+} & Pick<TooltipProps, 'position'>;
 
 export function InfoText<T extends 'span' | 'p' | 'label' | 'div' = 'span'>({
   title,
   children,
+  position,
   ...textProps
 }: InfoTextProps<T>) {
   if (!title) {
     return <Text {...textProps}>{children}</Text>;
   }
   return (
-    <Tooltip title={title} skipWrapper isHoverable showUnderline>
+    <Tooltip
+      title={title}
+      position={position}
+      skipWrapper
+      isHoverable
+      showUnderline
+      underlineColor={textProps.variant === 'inherit' ? undefined : textProps.variant}
+    >
       <StyledText {...textProps} tabIndex={0}>
         {children}
       </StyledText>

@@ -9,8 +9,8 @@ import {
 } from 'sentry-test/reactTestingLibrary';
 
 import {CompactSelect} from '@sentry/scraps/compactSelect';
+import {InfoText} from '@sentry/scraps/info';
 import {useModal} from '@sentry/scraps/modal';
-import {Tooltip} from '@sentry/scraps/tooltip';
 
 import {closeModal, openModal} from 'sentry/actionCreators/modal';
 
@@ -286,9 +286,7 @@ describe('GlobalModal', () => {
     act(() =>
       openModal(({Body}) => (
         <Body>
-          <Tooltip title={<button onClick={buttonClick}>Click me</button>} isHoverable>
-            Hi
-          </Tooltip>
+          <InfoText title={<button onClick={buttonClick}>Click me</button>}>Hi</InfoText>
         </Body>
       ))
     );

@@ -28,7 +28,7 @@ describe('Tooltip', () => {
   it('renders', async () => {
     render(
       <Tooltip title="test">
-        <span>My Button</span>
+        <button>My Button</button>
       </Tooltip>
     );
 
@@ -47,14 +47,14 @@ describe('Tooltip', () => {
   it('updates title', async () => {
     const {rerender} = render(
       <Tooltip title="test">
-        <span>My Button</span>
+        <button>My Button</button>
       </Tooltip>
     );
 
     // Change title
     rerender(
       <Tooltip title="bar">
-        <span>My Button</span>
+        <button>My Button</button>
       </Tooltip>
     );
 
@@ -70,7 +70,7 @@ describe('Tooltip', () => {
   it('disables and does not render', async () => {
     render(
       <Tooltip title="test" disabled>
-        <span>My Button</span>
+        <button>My Button</button>
       </Tooltip>
     );
 
@@ -84,7 +84,7 @@ describe('Tooltip', () => {
   it('resets visibility when becoming disabled', async () => {
     const {rerender} = render(
       <Tooltip title="test" disabled={false}>
-        <span>My Button</span>
+        <button>My Button</button>
       </Tooltip>
     );
 
@@ -93,15 +93,15 @@ describe('Tooltip', () => {
 
     rerender(
       <Tooltip title="test" disabled>
-        <span>My Button</span>
+        <button>My Button</button>
       </Tooltip>
     );
     expect(screen.queryByText('test')).not.toBeInTheDocument();
 
     // Becomes enabled again
     rerender(
       <Tooltip title="test" disabled={false}>
-        <span>My Button</span>
+        <button>My Button</button>
       </Tooltip>
     );
     expect(screen.queryByText('test')).not.toBeInTheDocument();
@@ -110,7 +110,7 @@ describe('Tooltip', () => {
   it('does not render an empty tooltip', async () => {
     render(
       <Tooltip title="">
-        <span>My Button</span>
+        <button>My Button</button>
       </Tooltip>
     );
     await userEvent.hover(screen.getByText('My Button'));

@@ -1,9 +1,9 @@
 import styled from '@emotion/styled';
 
 import {Tag} from '@sentry/scraps/badge';
+import {InfoText} from '@sentry/scraps/info';
 import {Flex} from '@sentry/scraps/layout';
 import {ExternalLink} from '@sentry/scraps/link';
-import {Tooltip} from '@sentry/scraps/tooltip';
 
 import {FeedbackItemUsername} from 'sentry/components/feedback/feedbackItem/feedbackItemUsername';
 import {FeedbackTimestampsTooltip} from 'sentry/components/feedback/feedbackItem/feedbackTimestampsTooltip';
@@ -26,8 +26,8 @@ export function MessageTitle({feedbackItem, eventData}: Props) {
       <Flex gap="md">
         {isSpam ? (
           <Tag key="spam" variant="danger">
-            <Tooltip
-              isHoverable
+            <InfoText
+              variant="inherit"
               position="left"
               title={tct(
                 'This feedback was automatically marked as spam. Learn more by [link:reading our docs.]',
@@ -39,7 +39,7 @@ export function MessageTitle({feedbackItem, eventData}: Props) {
               )}
             >
               {t('spam')}
-            </Tooltip>
+            </InfoText>
           </Tag>
         ) : null}
         <StyledTimeSince

diff --git a/static/app/components/hovercard.spec.tsx b/static/app/components/hovercard.spec.tsx
@@ -103,7 +103,7 @@ describe('Hovercard', () => {
         position="top"
         body={
           <Tooltip title="Inner tooltip content">
-            <span>Inner trigger</span>
+            <button>Inner trigger</button>
           </Tooltip>
         }
         header="Hovercard Header"

@@ -8,6 +8,7 @@ import {PlatformIcon} from 'platformicons';
 
 import {LinkButton} from '@sentry/scraps/button';
 import {Checkbox} from '@sentry/scraps/checkbox';
+import {InfoText} from '@sentry/scraps/info';
 import {Flex} from '@sentry/scraps/layout';
 import {ExternalLink, Link} from '@sentry/scraps/link';
 import {Tooltip} from '@sentry/scraps/tooltip';
@@ -97,13 +98,14 @@ export interface ReplayTableColumn {
 
 export const ReplayActivityColumn: ReplayTableColumn = {
   Header: () => (
-    <Tooltip
+    <InfoText
+      variant="inherit"
       title={t(
         'Activity represents how much user activity happened in a replay. It is determined by the number of errors encountered, duration, and UI events.'
       )}
     >
       {t('Activity')}
-    </Tooltip>
+    </InfoText>
   ),
   interactive: false,
   sortKey: 'activity',
@@ -179,8 +181,8 @@ export const ReplayBrowserColumn: ReplayTableColumn = {
 
 export const ReplayCountDeadClicksColumn: ReplayTableColumn = {
   Header: () => (
-    <Tooltip
-      isHoverable
+    <InfoText
+      variant="inherit"
       title={tct(
         'A dead click is a user click that does not result in any page activity after 7 seconds. Requires SDK version >= [minSDK]. [link:Learn more.]',
         {
@@ -190,7 +192,7 @@ export const ReplayCountDeadClicksColumn: ReplayTableColumn = {
       )}
     >
       {t('Dead clicks')}
-    </Tooltip>
+    </InfoText>
   ),
   interactive: false,
   sortKey: 'count_dead_clicks',
@@ -223,8 +225,8 @@ export const ReplayCountDeadClicksColumn: ReplayTableColumn = {
 
 export const ReplayCountErrorsColumn: ReplayTableColumn = {
   Header: () => (
-    <Tooltip
-      isHoverable
+    <InfoText
+      variant="inherit"
       title={tct(
         'The error count only reflects errors generated within the Replay SDK. [inboundFilters:Inbound Filters] may have prevented those errors from being saved. [perfIssue:Performance] and other [replayIssue:error] types may have been added afterwards.',
         {
@@ -241,7 +243,7 @@ export const ReplayCountErrorsColumn: ReplayTableColumn = {
       )}
     >
       {t('Errors')}
-    </Tooltip>
+    </InfoText>
   ),
   interactive: false,
   sortKey: 'count_errors',
@@ -274,8 +276,8 @@ export const ReplayCountErrorsColumn: ReplayTableColumn = {
 
 export const ReplayCountRageClicksColumn: ReplayTableColumn = {
   Header: () => (
-    <Tooltip
-      isHoverable
+    <InfoText
+      variant="inherit"
       title={tct(
         'A rage click is 5 or more clicks on a dead element, which exhibits no page activity after 7 seconds. Requires SDK version >= [minSDK]. [link:Learn more.]',
         {
@@ -285,7 +287,7 @@ export const ReplayCountRageClicksColumn: ReplayTableColumn = {
       )}
     >
       {t('Rage clicks')}
-    </Tooltip>
+    </InfoText>
   ),
   interactive: false,
   sortKey: 'count_rage_clicks',
@@ -497,9 +499,9 @@ export const ReplaySelectColumn: ReplayTableColumn = {
 
 export const ReplaySessionColumn: ReplayTableColumn = {
   Header: () => (
-    <Tooltip title={t('By default, replays are sorted by time sent.')}>
+    <InfoText variant="inherit" title={t('By default, replays are sorted by time sent.')}>
       {t('Replay')}
-    </Tooltip>
+    </InfoText>
   ),
   interactive: true,
   sortKey: 'started_at',

@@ -6,6 +6,7 @@ import partial from 'lodash/partial';
 
 import {Tag} from '@sentry/scraps/badge';
 import {Button} from '@sentry/scraps/button';
+import {InfoText} from '@sentry/scraps/info';
 import {ExternalLink, Link} from '@sentry/scraps/link';
 import {Tooltip} from '@sentry/scraps/tooltip';
 
@@ -332,9 +333,9 @@ export const FIELD_FORMATTERS: FieldFormatters = {
       if (data[field] > 0 && data[field] < NUMBER_MIN_VALUE) {
         return (
           <NumberContainer>
-            <Tooltip title={formatTooltipValue(data[field], 'number')}>
+            <InfoText variant="inherit" title={formatTooltipValue(data[field], 'number')}>
               <span>{`<${NUMBER_MIN_VALUE}`}</span>
-            </Tooltip>
+            </InfoText>
           </NumberContainer>
         );
       }

@@ -1,6 +1,5 @@
 import {Flex} from '@sentry/scraps/layout';
 import {Link} from '@sentry/scraps/link';
-import {Tooltip} from '@sentry/scraps/tooltip';
 
 import {Placeholder} from 'sentry/components/placeholder';
 import {DetailSection} from 'sentry/components/workflowEngine/ui/detailSection';
@@ -48,11 +47,7 @@ function AssignToUser({userId}: {userId: string}) {
   }
 
   const title = user?.name ?? user?.email ?? t('Unknown user');
-  return (
-    <Tooltip title={title} showOnlyOnOverflow>
-      {t('Assign to %s', title)}
-    </Tooltip>
-  );
+  return t('Assign to %s', title);
 }
 
 function DetectorOwner({owner}: {owner: Detector['owner']}) {

@@ -1,6 +1,7 @@
 import {Fragment, memo, useCallback, type ComponentPropsWithRef} from 'react';
 import styled from '@emotion/styled';
 
+import {InfoText} from '@sentry/scraps/info';
 import {Container, Flex, Stack} from '@sentry/scraps/layout';
 import {ExternalLink, Link} from '@sentry/scraps/link';
 import {Pagination} from '@sentry/scraps/pagination';
@@ -269,9 +270,9 @@ const BodyCell = memo(function BodyCell({
     case 'user': {
       if (!dataRow.user) {
         return (
-          <Tooltip title={<UserNotInstrumentedTooltip />} isHoverable>
-            <Text variant="muted">&mdash;</Text>
-          </Tooltip>
+          <InfoText variant="muted" title={<UserNotInstrumentedTooltip />}>
+            &mdash;
+          </InfoText>
         );
       }
       const displayName = getUserDisplayName(dataRow.user);

@@ -1,10 +1,10 @@
 import {useEffect, type ReactNode} from 'react';
 
 import {FeatureBadge} from '@sentry/scraps/badge';
+import {InfoText} from '@sentry/scraps/info';
 import {Flex, Stack} from '@sentry/scraps/layout';
 import {ExternalLink} from '@sentry/scraps/link';
 import {TabList, Tabs} from '@sentry/scraps/tabs';
-import {Tooltip} from '@sentry/scraps/tooltip';
 
 import {useOrganizationSeerSetup} from 'sentry/components/events/autofix/useOrganizationSeerSetup';
 import {t, tct} from 'sentry/locale';
@@ -40,8 +40,8 @@ function getReplayTabs({
     [TabKey.AI]:
       hasAiSummary && (!isVideoReplay || hasMobileSummary) ? (
         <Flex align="center" gap="sm">
-          <Tooltip
-            isHoverable
+          <InfoText
+            variant="inherit"
             title={tct(
               'Powered by generative AI. Learn more about our [link:AI privacy principles].',
               {
@@ -52,7 +52,7 @@ function getReplayTabs({
             )}
           >
             {t('AI Summary')}
-          </Tooltip>
+          </InfoText>
           <FeatureBadge type="new" />
         </Flex>
       ) : null,