diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/ReferencesButton.test.js b/packages/jaeger-ui-components/src/TraceTimelineViewer/ReferencesButton.test.js
index ba991691e30..a85bcb01c2a 100644
--- a/packages/jaeger-ui-components/src/TraceTimelineViewer/ReferencesButton.test.js
+++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/ReferencesButton.test.js
@@ -19,8 +19,7 @@ import ReferencesButton, { getStyles } from './ReferencesButton';
 import transformTraceData from '../model/transform-trace-data';
 import traceGenerator from '../demo/trace-generators';
 import ReferenceLink from '../url/ReferenceLink';
-import { UIDropdown, UIMenuItem } from '../uiElementsContext';
-import { Tooltip } from '@grafana/ui';
+import { UIDropdown, UIMenuItem, UITooltip } from '../uiElementsContext';
 
 describe(ReferencesButton, () => {
   const trace = transformTraceData(traceGenerator.trace({ numberOfSpans: 10 }));
@@ -52,7 +51,7 @@ describe(ReferencesButton, () => {
     const wrapper = shallow(<ReferencesButton {...props} />);
     const dropdown = wrapper.find(UIDropdown);
     const refLink = wrapper.find(ReferenceLink);
-    const tooltip = wrapper.find(Tooltip);
+    const tooltip = wrapper.find(UITooltip);
     const styles = getStyles();
 
     expect(dropdown.length).toBe(0);
diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/ReferencesButton.tsx b/packages/jaeger-ui-components/src/TraceTimelineViewer/ReferencesButton.tsx
index 2b3455b4ee2..51e41ec0e4a 100644
--- a/packages/jaeger-ui-components/src/TraceTimelineViewer/ReferencesButton.tsx
+++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/ReferencesButton.tsx
@@ -16,11 +16,10 @@ import React from 'react';
 import { css } from 'emotion';
 import NewWindowIcon from '../common/NewWindowIcon';
 import { TraceSpanReference } from '@grafana/data';
-import { UIDropdown, UIMenuItem, UIMenu } from '../uiElementsContext';
+import { UITooltip, UIDropdown, UIMenuItem, UIMenu, TooltipPlacement } from '../uiElementsContext';
 
 import ReferenceLink from '../url/ReferenceLink';
 import { createStyle } from '../Theme';
-import { Tooltip } from '@grafana/ui';
 
 export const getStyles = createStyle(() => {
   return {
@@ -80,26 +79,27 @@ export default class ReferencesButton extends React.PureComponent<TReferencesBut
     const tooltipProps = {
       arrowPointAtCenter: true,
       mouseLeaveDelay: 0.5,
-      content: tooltipText,
+      placement: 'bottom' as TooltipPlacement,
+      title: tooltipText,
       overlayClassName: styles.tooltip,
     };
 
     if (references.length > 1) {
       return (
-        <Tooltip {...tooltipProps}>
+        <UITooltip {...tooltipProps}>
           <UIDropdown overlay={this.referencesList(references)} placement="bottomRight" trigger={['click']}>
             <a className={styles.MultiParent}>{children}</a>
           </UIDropdown>
-        </Tooltip>
+        </UITooltip>
       );
     }
     const ref = references[0];
     return (
-      <Tooltip {...tooltipProps}>
+      <UITooltip {...tooltipProps}>
         <ReferenceLink reference={ref} focusSpan={focusSpan} className={styles.MultiParent}>
           {children}
         </ReferenceLink>
-      </Tooltip>
+      </UITooltip>
     );
   }
 }
diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanBar.test.js b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanBar.test.js
index fff47284b36..b18addc8ed3 100644
--- a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanBar.test.js
+++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanBar.test.js
@@ -14,7 +14,7 @@
 
 import React from 'react';
 import { mount } from 'enzyme';
-import { Tooltip } from '@grafana/ui';
+import UIElementsContext, { UIPopover } from '../uiElementsContext';
 
 import SpanBar from './SpanBar';
 
@@ -73,9 +73,13 @@ describe('<SpanBar>', () => {
   };
 
   it('renders without exploding', () => {
-    const wrapper = mount(<SpanBar {...props} />);
+    const wrapper = mount(
+      <UIElementsContext.Provider value={{ Popover: () => '' }}>
+        <SpanBar {...props} />
+      </UIElementsContext.Provider>
+    );
     expect(wrapper).toBeDefined();
-    const { onMouseLeave, onMouseOver } = wrapper.find('[data-test-id="SpanBar--wrapper"]').props();
+    const { onMouseOver, onMouseLeave } = wrapper.find('[data-test-id="SpanBar--wrapper"]').props();
     const labelElm = wrapper.find('[data-test-id="SpanBar--label"]');
     expect(labelElm.text()).toBe(shortLabel);
     onMouseOver();
@@ -86,7 +90,11 @@ describe('<SpanBar>', () => {
 
   it('log markers count', () => {
     // 3 log entries, two grouped together with the same timestamp
-    const wrapper = mount(<SpanBar {...props} />);
-    expect(wrapper.find(Tooltip).length).toEqual(2);
+    const wrapper = mount(
+      <UIElementsContext.Provider value={{ Popover: () => '' }}>
+        <SpanBar {...props} />
+      </UIElementsContext.Provider>
+    );
+    expect(wrapper.find(UIPopover).length).toEqual(2);
   });
 });
diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanBar.tsx b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanBar.tsx
index 3d941006b9c..bbfe5ba38f6 100644
--- a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanBar.tsx
+++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanBar.tsx
@@ -24,7 +24,7 @@ import { ViewedBoundsFunctionType } from './utils';
 import { TNil } from '../types';
 import { TraceSpan } from '@grafana/data';
 import { createStyle } from '../Theme';
-import { Tooltip } from '@grafana/ui';
+import { UIPopover } from '../uiElementsContext';
 
 const getStyles = createStyle(() => {
   return {
@@ -181,15 +181,15 @@ function SpanBar(props: TInnerProps) {
       </div>
       <div>
         {Object.keys(logGroups).map((positionKey) => (
-          <Tooltip
+          <UIPopover
             key={positionKey}
-            placement="auto"
+            placement="topLeft"
             content={
               <AccordianLogs interactive={false} isOpen logs={logGroups[positionKey]} timestamp={traceStartTime} />
             }
           >
             <div className={styles.logMarker} style={{ left: positionKey }} />
-          </Tooltip>
+          </UIPopover>
         ))}
       </div>
       {rpc && (
diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/index.tsx b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/index.tsx
index c6dbf3a1fb9..f17bc030b43 100644
--- a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/index.tsx
+++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/index.tsx
@@ -268,7 +268,7 @@ export default function SpanDetail(props: SpanDetailProps) {
           <CopyIcon
             copyText={deepLinkCopyText}
             icon="link"
-            placement="right-end"
+            placement="topRight"
             tooltipTitle="Copy deep link to this span"
           />
         </small>
diff --git a/packages/jaeger-ui-components/src/common/CopyIcon.test.js b/packages/jaeger-ui-components/src/common/CopyIcon.test.js
index 05ec8db2d32..5c6fc38386c 100644
--- a/packages/jaeger-ui-components/src/common/CopyIcon.test.js
+++ b/packages/jaeger-ui-components/src/common/CopyIcon.test.js
@@ -15,8 +15,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import * as copy from 'copy-to-clipboard';
-import { UIButton } from '../uiElementsContext';
-import { Tooltip } from '@grafana/ui';
+import { UIButton, UITooltip } from '../uiElementsContext';
 
 import CopyIcon from './CopyIcon';
 
@@ -53,19 +52,19 @@ describe('<CopyIcon />', () => {
     expect(copySpy).toHaveBeenCalledWith(props.copyText);
   });
 
-  it.skip('updates state when tooltip hides and state.hasCopied is true', () => {
+  it('updates state when tooltip hides and state.hasCopied is true', () => {
     wrapper.setState({ hasCopied: true });
-    wrapper.find(Tooltip).prop('onVisibleChange')(false);
+    wrapper.find(UITooltip).prop('onVisibleChange')(false);
     expect(wrapper.state().hasCopied).toBe(false);
 
     const state = wrapper.state();
-    wrapper.find(Tooltip).prop('onVisibleChange')(false);
+    wrapper.find(UITooltip).prop('onVisibleChange')(false);
     expect(wrapper.state()).toBe(state);
   });
 
-  it.skip('persists state when tooltip opens', () => {
+  it('persists state when tooltip opens', () => {
     wrapper.setState({ hasCopied: true });
-    wrapper.find(Tooltip).prop('onVisibleChange')(true);
+    wrapper.find(UITooltip).prop('onVisibleChange')(true);
     expect(wrapper.state().hasCopied).toBe(true);
   });
 });
diff --git a/packages/jaeger-ui-components/src/common/CopyIcon.tsx b/packages/jaeger-ui-components/src/common/CopyIcon.tsx
index 4e248e61e1f..ff31e733ead 100644
--- a/packages/jaeger-ui-components/src/common/CopyIcon.tsx
+++ b/packages/jaeger-ui-components/src/common/CopyIcon.tsx
@@ -17,10 +17,8 @@ import { css } from 'emotion';
 import cx from 'classnames';
 import copy from 'copy-to-clipboard';
 
-import { UIButton } from '../uiElementsContext';
+import { UITooltip, TooltipPlacement, UIButton } from '../uiElementsContext';
 import { createStyle } from '../Theme';
-import { Tooltip } from '@grafana/ui';
-import { TooltipPlacement } from '@grafana/ui/src/components/Tooltip/PopoverController';
 
 const getStyles = createStyle(() => {
   return {
@@ -50,7 +48,7 @@ type PropsType = {
 type StateType = {
   hasCopied: boolean;
 };
-// TODO(Zoltan): This component is not working properly right now. Decide what to do with it.
+
 export default class CopyIcon extends React.PureComponent<PropsType, StateType> {
   static defaultProps: Partial<PropsType> = {
     className: undefined,
@@ -80,10 +78,12 @@ export default class CopyIcon extends React.PureComponent<PropsType, StateType>
   render() {
     const styles = getStyles();
     return (
-      <Tooltip
-        // onVisibleChange={this.handleTooltipVisibilityChange}
+      <UITooltip
+        arrowPointAtCenter
+        mouseLeaveDelay={0.5}
+        onVisibleChange={this.handleTooltipVisibilityChange}
         placement={this.props.placement}
-        content={this.state.hasCopied ? 'Copied' : this.props.tooltipTitle}
+        title={this.state.hasCopied ? 'Copied' : this.props.tooltipTitle}
       >
         <UIButton
           className={cx(styles.CopyIcon, this.props.className)}
@@ -91,7 +91,7 @@ export default class CopyIcon extends React.PureComponent<PropsType, StateType>
           icon={this.props.icon}
           onClick={this.handleClick}
         />
-      </Tooltip>
+      </UITooltip>
     );
   }
 }
diff --git a/packages/jaeger-ui-components/src/common/__snapshots__/CopyIcon.test.js.snap b/packages/jaeger-ui-components/src/common/__snapshots__/CopyIcon.test.js.snap
index b728d023fab..7666858de82 100644
--- a/packages/jaeger-ui-components/src/common/__snapshots__/CopyIcon.test.js.snap
+++ b/packages/jaeger-ui-components/src/common/__snapshots__/CopyIcon.test.js.snap
@@ -1,9 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<CopyIcon /> renders as expected 1`] = `
-<Tooltip
-  content="tooltipTitleValue"
+<UITooltip
+  arrowPointAtCenter={true}
+  mouseLeaveDelay={0.5}
+  onVisibleChange={[Function]}
   placement="left"
+  title="tooltipTitleValue"
 >
   <UIButton
     className="css-oqwzau classNameValue"
@@ -11,5 +14,5 @@ exports[`<CopyIcon /> renders as expected 1`] = `
     icon="copy"
     onClick={[Function]}
   />
-</Tooltip>
+</UITooltip>
 `;
diff --git a/packages/jaeger-ui-components/src/uiElementsContext.tsx b/packages/jaeger-ui-components/src/uiElementsContext.tsx
index fc3f8541055..b11650a75f0 100644
--- a/packages/jaeger-ui-components/src/uiElementsContext.tsx
+++ b/packages/jaeger-ui-components/src/uiElementsContext.tsx
@@ -12,7 +12,59 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React from 'react';
+import React, { ReactElement } from 'react';
+
+export type TooltipPlacement =
+  | 'top'
+  | 'left'
+  | 'right'
+  | 'bottom'
+  | 'topLeft'
+  | 'topRight'
+  | 'bottomLeft'
+  | 'bottomRight'
+  | 'leftTop'
+  | 'leftBottom'
+  | 'rightTop'
+  | 'rightBottom';
+export type PopoverProps = {
+  children: ReactElement;
+  content: ReactElement;
+  arrowPointAtCenter?: boolean;
+  overlayClassName?: string;
+  placement?: TooltipPlacement;
+};
+
+export const UIPopover: React.ComponentType<PopoverProps> = function UIPopover(props: PopoverProps) {
+  return (
+    <GetElementsContext>
+      {(elements: Elements) => {
+        return <elements.Popover {...props} />;
+      }}
+    </GetElementsContext>
+  );
+};
+
+export type TooltipProps = {
+  title: string | ReactElement;
+  getPopupContainer?: (triggerNode: Element) => HTMLElement;
+  overlayClassName?: string;
+  children: ReactElement;
+  placement?: TooltipPlacement;
+  mouseLeaveDelay?: number;
+  arrowPointAtCenter?: boolean;
+  onVisibleChange?: (visible: boolean) => void;
+};
+
+export const UITooltip: React.ComponentType<TooltipProps> = function UITooltip(props: TooltipProps) {
+  return (
+    <GetElementsContext>
+      {(elements: Elements) => {
+        return <elements.Tooltip {...props} />;
+      }}
+    </GetElementsContext>
+  );
+};
 
 export type IconProps = {
   type: string;
@@ -146,6 +198,8 @@ export const UIInputGroup = function UIInputGroup(props: InputGroupProps) {
 };
 
 export type Elements = {
+  Popover: React.ComponentType<PopoverProps>;
+  Tooltip: React.ComponentType<TooltipProps>;
   Icon: React.ComponentType<IconProps>;
   Dropdown: React.ComponentType<DropdownProps>;
   Menu: React.ComponentType<MenuProps>;
diff --git a/public/app/features/explore/TraceView/uiElements.tsx b/public/app/features/explore/TraceView/uiElements.tsx
index 8448d8a4545..e049cd181ec 100644
--- a/public/app/features/explore/TraceView/uiElements.tsx
+++ b/public/app/features/explore/TraceView/uiElements.tsx
@@ -1,6 +1,6 @@
 import { GrafanaTheme } from '@grafana/data';
-import { Button, Input, stylesFactory, useTheme } from '@grafana/ui';
-import { ButtonProps, Elements } from '@jaegertracing/jaeger-ui-components';
+import { Button, Input, stylesFactory, Tooltip as GrafanaTooltip, useTheme } from '@grafana/ui';
+import { ButtonProps, Elements, PopoverProps, TooltipProps } from '@jaegertracing/jaeger-ui-components';
 import cx from 'classnames';
 import { css } from 'emotion';
 import React from 'react';
@@ -12,6 +12,12 @@ import React from 'react';
 
 // This needs to be static to prevent remounting on every render.
 export const UIElements: Elements = {
+  Popover({ children, content }: PopoverProps) {
+    return <GrafanaTooltip content={content}>{children}</GrafanaTooltip>;
+  },
+  Tooltip({ children, title }: TooltipProps) {
+    return <GrafanaTooltip content={title}>{children}</GrafanaTooltip>;
+  },
   Icon: (() => null as any) as any,
   Dropdown: (() => null as any) as any,
   Menu: (() => null as any) as any,