Added tooltip to explain ops breakdown (#26390)

Transaction Summary duration calculations can seem ambiguous to the user. Added a tooltip to the Operation Duration column to clarify duration calculation.

static/app/components/discover/transactionsList.tsx

@@ -12,6 +12,8 @@ import Link from 'app/components/links/link';
 import LoadingIndicator from 'app/components/loadingIndicator';
 import Pagination from 'app/components/pagination';
 import PanelTable from 'app/components/panels/panelTable';
+import Tooltip from 'app/components/tooltip';
+import {IconQuestion} from 'app/icons';
 import {t} from 'app/locale';
 import overflowEllipsis from 'app/styles/overflowEllipsis';
 import space from 'app/styles/space';
@@ -438,7 +440,22 @@ class TransactionsTable extends React.PureComponent<TableProps> {
             <GuideAnchor target="span_op_relative_breakdowns">
               <SortLink
                 align={align}
-                title={title}
+                title={
+                  title === t('operation duration') ? (
+                    <React.Fragment>
+                      {title}
+                      <Tooltip
+                        title={t(
+                          'Durations are calculated by summing span durations over the course of the transaction. Percentages are then calculated by dividing the individual op duration by the sum of total op durations. Overlapping/parallel spans are only counted once.'
+                        )}
+                      >
+                        <StyledIconQuestion size="xs" color="gray400" />
+                      </Tooltip>
+                    </React.Fragment>
+                  ) : (
+                    title
+                  )
+                }
                 direction={undefined}
                 canSort={false}
                 generateSortLink={generateSortLink}
@@ -660,4 +677,10 @@ const StyledPagination = styled(Pagination)`
   margin: 0 0 0 ${space(1)};
 `;
 
+const StyledIconQuestion = styled(IconQuestion)`
+  position: relative;
+  top: 2px;
+  left: 4px;
+`;
+
 export default TransactionsList;