From 26f54a2fc76f21b3cd57537b5fb9c8a76b8efce7 Mon Sep 17 00:00:00 2001
From: Adela Almasan <88068998+adela-almasan@users.noreply.github.com>
Date: Mon, 8 Jan 2024 13:36:48 -0600
Subject: [PATCH] VizTooltips: Add wrapper shadow (#80164)

---
 .../src/components/uPlot/plugins/TooltipPlugin2.tsx      | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin2.tsx b/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin2.tsx
index c5968dafdbc..17c812f9ace 100644
--- a/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin2.tsx
+++ b/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin2.tsx
@@ -1,4 +1,4 @@
-import { css } from '@emotion/css';
+import { css, cx } from '@emotion/css';
 import React, { useLayoutEffect, useRef, useReducer, CSSProperties } from 'react';
 import { createPortal } from 'react-dom';
 import uPlot from 'uplot';
@@ -425,7 +425,7 @@ export const TooltipPlugin2 = ({ config, hoverMode, render, clientZoom = false,
 
   if (plot && isHovering) {
     return createPortal(
-      <div className={styles.tooltipWrapper} style={style} ref={domRef}>
+      <div className={cx(styles.tooltipWrapper, isPinned && styles.pinned)} style={style} ref={domRef}>
         {isPinned && <CloseButton onClick={dismiss} />}
         {contents}
       </div>,
@@ -446,7 +446,10 @@ const getStyles = (theme: GrafanaTheme2) => ({
     position: 'absolute',
     background: theme.colors.background.primary,
     border: `1px solid ${theme.colors.border.weak}`,
-    boxShadow: `0 4px 8px ${theme.colors.background.primary}`,
+    boxShadow: theme.shadows.z2,
     userSelect: 'text',
   }),
+  pinned: css({
+    boxShadow: theme.shadows.z3,
+  }),
 });