diff --git a/packages/grafana-ui/src/components/VizTooltip/VizTooltipRow.tsx b/packages/grafana-ui/src/components/VizTooltip/VizTooltipRow.tsx index 2fbb00c0fe2..7d7cdf9504f 100644 --- a/packages/grafana-ui/src/components/VizTooltip/VizTooltipRow.tsx +++ b/packages/grafana-ui/src/components/VizTooltip/VizTooltipRow.tsx @@ -27,6 +27,7 @@ enum LabelValueTypes { const SUCCESSFULLY_COPIED_TEXT = 'Copied to clipboard'; const SHOW_SUCCESS_DURATION = 2 * 1000; +const HORIZONTAL_PX_PER_CHAR = 7; export const VizTooltipRow = ({ label, @@ -120,6 +121,11 @@ export const VizTooltipRow = ({ const onMouseLeaveLabel = () => setShowLabelTooltip(false); + // if label is > 50% window width, try to put label/value pairs on new lines + if (label.length * HORIZONTAL_PX_PER_CHAR > window.innerWidth / 2) { + label = label.replaceAll('{', '{\n ').replaceAll('}', '\n}').replaceAll(', ', ',\n '); + } + return (
{(color || label) && (