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 ( - - ), - } - )} - > +
- +
); }