diff --git a/packages/grafana-ui/src/components/VizTooltip/VizTooltipContent.tsx b/packages/grafana-ui/src/components/VizTooltip/VizTooltipContent.tsx index d5823a7ea3b..fd302ee3287 100644 --- a/packages/grafana-ui/src/components/VizTooltip/VizTooltipContent.tsx +++ b/packages/grafana-ui/src/components/VizTooltip/VizTooltipContent.tsx @@ -46,6 +46,7 @@ export const VizTooltipContent = ({ justify={'space-between'} isPinned={isPinned} lineStyle={lineStyle} + showValueScroll={!scrollable} /> ))} {children} diff --git a/packages/grafana-ui/src/components/VizTooltip/VizTooltipRow.tsx b/packages/grafana-ui/src/components/VizTooltip/VizTooltipRow.tsx index ff3af891237..f08e075a8ac 100644 --- a/packages/grafana-ui/src/components/VizTooltip/VizTooltipRow.tsx +++ b/packages/grafana-ui/src/components/VizTooltip/VizTooltipRow.tsx @@ -1,5 +1,5 @@ import { css, cx } from '@emotion/css'; -import React, { ReactNode, useEffect, useRef, useState } from 'react'; +import React, { CSSProperties, ReactNode, useEffect, useRef, useState } from 'react'; import { GrafanaTheme2 } from '@grafana/data'; @@ -16,6 +16,7 @@ interface VizTooltipRowProps extends Omit { isActive?: boolean; // for series list marginRight?: string; isPinned: boolean; + showValueScroll?: boolean; } enum LabelValueTypes { @@ -37,11 +38,23 @@ export const VizTooltipRow = ({ marginRight = '0px', isPinned, lineStyle, + showValueScroll, }: VizTooltipRowProps) => { const styles = useStyles2(getStyles, justify, marginRight); + const innerValueScrollStyle: CSSProperties = showValueScroll + ? { + maxHeight: 55, + whiteSpace: 'wrap', + wordBreak: 'break-word', + overflowY: 'scroll', + } + : { + whiteSpace: 'wrap', + wordBreak: 'break-word', + }; + const [showLabelTooltip, setShowLabelTooltip] = useState(false); - const [showValueTooltip, setShowValueTooltip] = useState(false); const [copiedText, setCopiedText] = useState | null>(null); const [showCopySuccess, setShowCopySuccess] = useState(false); @@ -106,14 +119,6 @@ export const VizTooltipRow = ({ const onMouseLeaveLabel = () => setShowLabelTooltip(false); - const onMouseEnterValue = (event: React.MouseEvent) => { - if (event.currentTarget.offsetWidth < event.currentTarget.scrollWidth) { - setShowValueTooltip(true); - } - }; - - const onMouseLeaveValue = () => setShowValueTooltip(false); - return (
{(color || label) && ( @@ -160,27 +165,26 @@ export const VizTooltipRow = ({ )} {!isPinned ? ( -
{value}
+
+ {value} +
) : ( - - <> - {showCopySuccess && copiedText?.value && ( - - {SUCCESSFULLY_COPIED_TEXT} - - )} - {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */} -
copyToClipboard(value ? value.toString() : '', LabelValueTypes.value)} - ref={valueRef} - > - {value} -
- -
+ <> + {showCopySuccess && copiedText?.value && ( + + {SUCCESSFULLY_COPIED_TEXT} + + )} + {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */} +
copyToClipboard(value ? value.toString() : '', LabelValueTypes.value)} + ref={valueRef} + > + {value} +
+ )} {color && colorPlacement === ColorPlacement.trailing && ( @@ -199,9 +203,8 @@ export const VizTooltipRow = ({ const getStyles = (theme: GrafanaTheme2, justify: string, marginRight: string) => ({ contentWrapper: css({ display: 'flex', - alignItems: 'center', + alignItems: 'start', justifyContent: justify, - flexWrap: 'wrap', marginRight: marginRight, }), label: css({ @@ -219,7 +222,6 @@ const getStyles = (theme: GrafanaTheme2, justify: string, marginRight: string) = valueWrapper: css({ display: 'flex', alignItems: 'center', - minWidth: 0, }), activeSeries: css({ fontWeight: theme.typography.fontWeightBold, diff --git a/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin2.tsx b/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin2.tsx index 4ce45e20379..bc40f0506ba 100644 --- a/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin2.tsx +++ b/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin2.tsx @@ -125,8 +125,6 @@ export const TooltipPlugin2 = ({ const [{ plot, isHovering, isPinned, contents, style, dismiss }, setState] = useReducer(mergeState, null, initState); const sizeRef = useRef(); - - maxWidth = isPinned ? DEFAULT_TOOLTIP_WIDTH : maxWidth ?? DEFAULT_TOOLTIP_WIDTH; const styles = useStyles2(getStyles, maxWidth); const renderRef = useRef(render); diff --git a/packages/grafana-ui/src/options/builder/tooltip.tsx b/packages/grafana-ui/src/options/builder/tooltip.tsx index eda34ed559a..25828a5349e 100644 --- a/packages/grafana-ui/src/options/builder/tooltip.tsx +++ b/packages/grafana-ui/src/options/builder/tooltip.tsx @@ -66,7 +66,6 @@ export function addTooltipOptions( settings: { integer: true, }, - showIf: (options: T) => false, // options.tooltip?.mode !== TooltipDisplayMode.None, }) .addNumberInput({ path: 'tooltip.maxHeight', diff --git a/public/app/plugins/panel/heatmap/module.tsx b/public/app/plugins/panel/heatmap/module.tsx index f781881a29c..8c35609950a 100644 --- a/public/app/plugins/panel/heatmap/module.tsx +++ b/public/app/plugins/panel/heatmap/module.tsx @@ -421,7 +421,6 @@ export const plugin = new PanelPlugin(HeatmapPanel) settings: { integer: true, }, - showIf: (options) => false, }); builder.addNumberInput({