diff --git a/static/app/views/performance/newTraceDetails/traceLinksNavigation/traceLinkNavigationButton.tsx b/static/app/views/performance/newTraceDetails/traceLinksNavigation/traceLinkNavigationButton.tsx
index 0e01e05b385f00..e4afe04b656136 100644
--- a/static/app/views/performance/newTraceDetails/traceLinksNavigation/traceLinkNavigationButton.tsx
+++ b/static/app/views/performance/newTraceDetails/traceLinksNavigation/traceLinkNavigationButton.tsx
@@ -1,10 +1,11 @@
import {useMemo} from 'react';
import {LinkButton} from '@sentry/scraps/button/linkButton';
+import {ExternalLink} from '@sentry/scraps/link';
import {normalizeDateTimeParams} from 'sentry/components/organizations/pageFilters/parse';
import {IconChevron} from 'sentry/icons';
-import {t} from 'sentry/locale';
+import {t, tct} from 'sentry/locale';
import {useLocation} from 'sentry/utils/useLocation';
import useOrganization from 'sentry/utils/useOrganization';
import type {TraceItemResponseAttribute} from 'sentry/views/explore/hooks/useTraceItemDetails';
@@ -41,6 +42,7 @@ export function TraceLinkNavigationButton({
adjacentTraceStartTimestamp,
iconDirection,
ariaLabel,
+ title,
} = useMemo(() => {
if (direction === 'previous') {
return {
@@ -48,6 +50,11 @@ export function TraceLinkNavigationButton({
adjacentTraceStartTimestamp: linkedTraceWindowTimestamp,
iconDirection: 'left' as const,
ariaLabel: t('Previous Trace'),
+ title: tct(`Go to the previous trace of the same session. [link:Learn More]`, {
+ link: (
+
+ ),
+ }),
};
}
return {
@@ -55,6 +62,11 @@ export function TraceLinkNavigationButton({
adjacentTraceStartTimestamp: currentTraceStartTimestamp,
iconDirection: 'right' as const,
ariaLabel: t('Next Trace'),
+ title: tct(`Go to the next trace of the same session. [link:Learn More]`, {
+ link: (
+
+ ),
+ }),
};
}, [direction, currentTraceStartTimestamp, linkedTraceWindowTimestamp]);
@@ -89,6 +101,12 @@ export function TraceLinkNavigationButton({
size="xs"
icon={}
aria-label={ariaLabel}
+ tooltipProps={{
+ position: 'top',
+ delay: 400,
+ isHoverable: true,
+ }}
+ title={title}
onClick={closeSpanDetailsDrawer}
disabled={!traceId || isTraceLoading || !isTraceAvailable}
to={getTraceDetailsUrl({
diff --git a/static/app/views/performance/newTraceDetails/traceLinksNavigation/traceLinksNavigation.tsx b/static/app/views/performance/newTraceDetails/traceLinksNavigation/traceLinksNavigation.tsx
index 83580f04ce5a49..951d7492d13eb2 100644
--- a/static/app/views/performance/newTraceDetails/traceLinksNavigation/traceLinksNavigation.tsx
+++ b/static/app/views/performance/newTraceDetails/traceLinksNavigation/traceLinksNavigation.tsx
@@ -1,8 +1,5 @@
import {ButtonBar} from '@sentry/scraps/button';
-import {ExternalLink} from '@sentry/scraps/link';
-import {Tooltip} from '@sentry/scraps/tooltip';
-import {tct} from 'sentry/locale';
import type {TraceRootEventQueryResults} from 'sentry/views/performance/newTraceDetails/traceApi/useTraceRootEvent';
import {isTraceItemDetailsResponse} from 'sentry/views/performance/newTraceDetails/traceApi/utils';
import {TraceLinkNavigationButton} from 'sentry/views/performance/newTraceDetails/traceLinksNavigation/traceLinkNavigationButton';
@@ -28,19 +25,7 @@ export function TraceLinksNavigation({
}
return (
-
- ),
- }
- )}
- >
+
-
+
);
}