diff --git a/packages/jaeger-ui/src/components/DeepDependencies/Header/HopsSelector/Selector.tsx b/packages/jaeger-ui/src/components/DeepDependencies/Header/HopsSelector/Selector.tsx
index 144b37e17e..e3e1346dda 100644
--- a/packages/jaeger-ui/src/components/DeepDependencies/Header/HopsSelector/Selector.tsx
+++ b/packages/jaeger-ui/src/components/DeepDependencies/Header/HopsSelector/Selector.tsx
@@ -103,7 +103,7 @@ export default class Selector extends PureComponent<TProps> {
 
     return (
       <Popover
-        arrowPointAtCenter
+        arrow={{ pointAtCenter: true }}
         content={[decrementBtn, ...hops.map(this.makeBtn), incrementBtn]}
         placement="bottom"
         title={`Visible ${lowercaseLabel}`}
diff --git a/packages/jaeger-ui/src/components/DeepDependencies/Header/HopsSelector/__snapshots__/Selector.test.js.snap b/packages/jaeger-ui/src/components/DeepDependencies/Header/HopsSelector/__snapshots__/Selector.test.js.snap
index 49d53e873e..1687b28ca8 100644
--- a/packages/jaeger-ui/src/components/DeepDependencies/Header/HopsSelector/__snapshots__/Selector.test.js.snap
+++ b/packages/jaeger-ui/src/components/DeepDependencies/Header/HopsSelector/__snapshots__/Selector.test.js.snap
@@ -2,7 +2,11 @@
 
 exports[`Selector renders buttons with expected text and classNames 1`] = `
 <Popover
-  arrowPointAtCenter={true}
+  arrow={
+    Object {
+      "pointAtCenter": true,
+    }
+  }
   content={
     Array [
       <button
@@ -127,7 +131,11 @@ exports[`Selector renders message when there are no options 1`] = `
 
 exports[`Selector renders upstream hops with negative distance correctly 1`] = `
 <Popover
-  arrowPointAtCenter={true}
+  arrow={
+    Object {
+      "pointAtCenter": true,
+    }
+  }
   content={
     Array [
       <button
diff --git a/packages/jaeger-ui/src/components/DeepDependencies/Header/LayoutSettings/index.tsx b/packages/jaeger-ui/src/components/DeepDependencies/Header/LayoutSettings/index.tsx
index eaa29b8f7b..893c9177ef 100644
--- a/packages/jaeger-ui/src/components/DeepDependencies/Header/LayoutSettings/index.tsx
+++ b/packages/jaeger-ui/src/components/DeepDependencies/Header/LayoutSettings/index.tsx
@@ -158,7 +158,12 @@ export default class LayoutSettings extends React.PureComponent<TProps> {
       </table>
     );
     return (
-      <Popover arrowPointAtCenter content={content} placement="bottomLeft" title="Layout settings">
+      <Popover
+        arrow={{ pointAtCenter: true }}
+        content={content}
+        placement="bottomLeft"
+        title="Layout settings"
+      >
         <div className={cssCls()}>
           {settingsIcon}
           Layout
diff --git a/packages/jaeger-ui/src/components/DeepDependencies/SidePanel/DetailsPanel.tsx b/packages/jaeger-ui/src/components/DeepDependencies/SidePanel/DetailsPanel.tsx
index 68e84c5ac3..d63ca2d899 100644
--- a/packages/jaeger-ui/src/components/DeepDependencies/SidePanel/DetailsPanel.tsx
+++ b/packages/jaeger-ui/src/components/DeepDependencies/SidePanel/DetailsPanel.tsx
@@ -140,7 +140,7 @@ export class UnconnectedDetailsPanel extends React.PureComponent<TProps, TState>
         <div className="Ddg--DetailsPanel--DecorationHeader">
           <span>{stringSupplant(decorationSchema.name, { service, operation })}</span>
           {detailLink && (
-            <Tooltip arrowPointAtCenter title="More Info">
+            <Tooltip arrow={{ pointAtCenter: true }} title="More Info">
               <a
                 className="Ddg--DetailsPanel--DetailLink"
                 href={stringSupplant(detailLink, { service, operation })}
diff --git a/packages/jaeger-ui/src/components/DeepDependencies/SidePanel/__snapshots__/DetailsPanel.test.js.snap b/packages/jaeger-ui/src/components/DeepDependencies/SidePanel/__snapshots__/DetailsPanel.test.js.snap
index 642fd629ad..4304531688 100644
--- a/packages/jaeger-ui/src/components/DeepDependencies/SidePanel/__snapshots__/DetailsPanel.test.js.snap
+++ b/packages/jaeger-ui/src/components/DeepDependencies/SidePanel/__snapshots__/DetailsPanel.test.js.snap
@@ -65,7 +65,11 @@ exports[`<SidePanel> render renders detailLink 1`] = `
       Decorating test svc
     </span>
     <Tooltip
-      arrowPointAtCenter={true}
+      arrow={
+        Object {
+          "pointAtCenter": true,
+        }
+      }
       title="More Info"
     >
       <a
diff --git a/packages/jaeger-ui/src/components/QualityMetrics/MetricCard.tsx b/packages/jaeger-ui/src/components/QualityMetrics/MetricCard.tsx
index 6ac7d7bd3a..5a90a07731 100644
--- a/packages/jaeger-ui/src/components/QualityMetrics/MetricCard.tsx
+++ b/packages/jaeger-ui/src/components/QualityMetrics/MetricCard.tsx
@@ -63,7 +63,7 @@ export default class MetricCard extends React.PureComponent<TProps> {
         <div className="MetricCard--Body">
           <span className="MetricCard--TitleHeader">
             {name}{' '}
-            <Tooltip arrowPointAtCenter title="Metric Documentation">
+            <Tooltip arrow={{ pointAtCenter: true }} title="Metric Documentation">
               <a href={metricDocumentationLink} target="_blank" rel="noreferrer noopener">
                 <NewWindowIcon />
               </a>
diff --git a/packages/jaeger-ui/src/components/QualityMetrics/__snapshots__/MetricCard.test.js.snap b/packages/jaeger-ui/src/components/QualityMetrics/__snapshots__/MetricCard.test.js.snap
index b74afc719a..2ef3c8115c 100644
--- a/packages/jaeger-ui/src/components/QualityMetrics/__snapshots__/MetricCard.test.js.snap
+++ b/packages/jaeger-ui/src/components/QualityMetrics/__snapshots__/MetricCard.test.js.snap
@@ -24,7 +24,11 @@ exports[`MetricCard renders as expected when passCount is zero 1`] = `
       Metric Name
        
       <Tooltip
-        arrowPointAtCenter={true}
+        arrow={
+          Object {
+            "pointAtCenter": true,
+          }
+        }
         title="Metric Documentation"
       >
         <a
@@ -101,7 +105,11 @@ exports[`MetricCard renders as expected with details 1`] = `
       Metric Name
        
       <Tooltip
-        arrowPointAtCenter={true}
+        arrow={
+          Object {
+            "pointAtCenter": true,
+          }
+        }
         title="Metric Documentation"
       >
         <a
@@ -220,7 +228,11 @@ exports[`MetricCard renders as expected without details 1`] = `
       Metric Name
        
       <Tooltip
-        arrowPointAtCenter={true}
+        arrow={
+          Object {
+            "pointAtCenter": true,
+          }
+        }
         title="Metric Documentation"
       >
         <a
@@ -297,7 +309,11 @@ exports[`MetricCard renders as expected without details 2`] = `
       Metric Name
        
       <Tooltip
-        arrowPointAtCenter={true}
+        arrow={
+          Object {
+            "pointAtCenter": true,
+          }
+        }
         title="Metric Documentation"
       >
         <a
diff --git a/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageSearchBar.tsx b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageSearchBar.tsx
index 2ff62a0592..813f832704 100644
--- a/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageSearchBar.tsx
+++ b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/TracePageSearchBar.tsx
@@ -91,7 +91,7 @@ export function TracePageSearchBarFn(props: TracePageSearchBarProps & { forwarde
           trackFindFunction={trackFilter}
         />
         <Tooltip
-          arrowPointAtCenter
+          arrow={{ pointAtCenter: true }}
           placement="bottomLeft"
           trigger="hover"
           overlayStyle={{ maxWidth: '600px' }} // This is a large tooltip and the default is too narrow.
diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/ReferencesButton.tsx b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/ReferencesButton.tsx
index f3ac379e2e..3bdb6be5bf 100644
--- a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/ReferencesButton.tsx
+++ b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/ReferencesButton.tsx
@@ -57,7 +57,7 @@ export default class ReferencesButton extends React.PureComponent<TReferencesBut
     const { references, children, tooltipText, focusSpan } = this.props;
 
     const tooltipProps = {
-      arrowPointAtCenter: true,
+      pointAtCenter: true,
       mouseLeaveDelay: 0.5,
       placement: 'bottom' as TooltipPlacement,
       title: tooltipText,
diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanBar.tsx b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanBar.tsx
index 7f9447ef8a..366dea0723 100644
--- a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanBar.tsx
+++ b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanBar.tsx
@@ -109,7 +109,7 @@ function SpanBar(props: TCommonProps) {
         {Object.keys(logGroups).map(positionKey => (
           <Popover
             key={positionKey}
-            arrowPointAtCenter
+            arrow={{ pointAtCenter: true }}
             overlayClassName="SpanBar--logHint"
             placement="topLeft"
             content={
diff --git a/packages/jaeger-ui/src/components/common/CopyIcon.tsx b/packages/jaeger-ui/src/components/common/CopyIcon.tsx
index a989d2e98d..1053e71d30 100644
--- a/packages/jaeger-ui/src/components/common/CopyIcon.tsx
+++ b/packages/jaeger-ui/src/components/common/CopyIcon.tsx
@@ -64,7 +64,7 @@ export default class CopyIcon extends React.PureComponent<PropsType, StateType>
   render() {
     return (
       <Tooltip
-        arrowPointAtCenter
+        arrow={{ pointAtCenter: true }}
         mouseLeaveDelay={0}
         onOpenChange={this.handleTooltipVisibilityChange}
         placement={this.props.placement}
diff --git a/packages/jaeger-ui/src/components/common/__snapshots__/CopyIcon.test.js.snap b/packages/jaeger-ui/src/components/common/__snapshots__/CopyIcon.test.js.snap
index 3f2335f771..cdde370ccc 100644
--- a/packages/jaeger-ui/src/components/common/__snapshots__/CopyIcon.test.js.snap
+++ b/packages/jaeger-ui/src/components/common/__snapshots__/CopyIcon.test.js.snap
@@ -2,7 +2,11 @@
 
 exports[`<CopyIcon /> renders as expected 1`] = `
 <Tooltip
-  arrowPointAtCenter={true}
+  arrow={
+    Object {
+      "pointAtCenter": true,
+    }
+  }
   mouseLeaveDelay={0}
   onOpenChange={[Function]}
   placement="top"