diff --git a/packages/grafana-ui/src/components/VizTooltip/VizTooltipContent.tsx b/packages/grafana-ui/src/components/VizTooltip/VizTooltipContent.tsx
index 38627531b81..2d48af640c5 100644
--- a/packages/grafana-ui/src/components/VizTooltip/VizTooltipContent.tsx
+++ b/packages/grafana-ui/src/components/VizTooltip/VizTooltipContent.tsx
@@ -1,5 +1,5 @@
import { css } from '@emotion/css';
-import React, { ReactElement } from 'react';
+import React, { CSSProperties, ReactElement } from 'react';
import { GrafanaTheme2 } from '@grafana/data';
@@ -11,14 +11,22 @@ import { LabelValue } from './types';
interface Props {
contentLabelValue: LabelValue[];
customContent?: ReactElement[];
+ scrollable?: boolean;
isPinned: boolean;
}
-export const VizTooltipContent = ({ contentLabelValue, customContent, isPinned }: Props) => {
+export const VizTooltipContent = ({ contentLabelValue, customContent, isPinned, scrollable = false }: Props) => {
const styles = useStyles2(getStyles);
+ const scrollableStyle: CSSProperties = scrollable
+ ? {
+ maxHeight: 400,
+ overflowY: 'auto',
+ }
+ : {};
+
return (
-
+
{contentLabelValue.map((labelValue, i) => {
const { label, value, color, colorIndicator, colorPlacement, isActive } = labelValue;
diff --git a/public/app/plugins/panel/timeseries/TimeSeriesTooltip.tsx b/public/app/plugins/panel/timeseries/TimeSeriesTooltip.tsx
index 5c6be434311..b7d10afdb7e 100644
--- a/public/app/plugins/panel/timeseries/TimeSeriesTooltip.tsx
+++ b/public/app/plugins/panel/timeseries/TimeSeriesTooltip.tsx
@@ -61,11 +61,12 @@ export const TimeSeriesTooltip = ({
const xFieldFmt = xField.display || getDisplayProcessor({ field: xField, theme });
let xVal = xFieldFmt(xField!.values[dataIdxs[0]!]).text;
+
let links: Array
> = [];
let contentLabelValue: LabelValue[] = [];
// Single mode
- if (mode === TooltipDisplayMode.Single || isPinned) {
+ if (mode === TooltipDisplayMode.Single) {
const field = seriesFrame.fields[seriesIdx!];
if (!field) {
return null;
@@ -75,6 +76,7 @@ export const TimeSeriesTooltip = ({
xVal = xFieldFmt(xField!.values[dataIdx]).text;
const fieldFmt = field.display || getDisplayProcessor({ field, theme });
const display = fieldFmt(field.values[dataIdx]);
+
links = getDataLinks(field, dataIdx);
contentLabelValue = [
@@ -88,7 +90,7 @@ export const TimeSeriesTooltip = ({
];
}
- if (mode === TooltipDisplayMode.Multi && !isPinned) {
+ if (mode === TooltipDisplayMode.Multi) {
const fields = seriesFrame.fields;
const sortIdx: unknown[] = [];
@@ -131,6 +133,12 @@ export const TimeSeriesTooltip = ({
});
}
}
+
+ if (seriesIdx != null) {
+ const field = seriesFrame.fields[seriesIdx];
+ const dataIdx = dataIdxs[seriesIdx]!;
+ links = getDataLinks(field, dataIdx);
+ }
}
const getHeaderLabel = (): LabelValue => {
@@ -148,7 +156,11 @@ export const TimeSeriesTooltip = ({