Docs: add tooltips shared content (#86553)

* Replaced shared tooltips file with text in xy chart

* Added tooltip info for heatmap

* Updated tooltip shared files, renamed one file, updated configure tooltips

* updated tooltip shared file paths

* Added tooltips shared files in relevant visualizations

* Added where shared file is used in tooltip-options-1

* Added where shared file is used in tooltip-options-2

* Added intro text and justifications to shared files

* Removed tooltips intro text from visualizations with shared files

* Added names of files to comments in shared files

docs/sources/panels-visualizations/configure-tooltips/index.md

@@ -67,6 +67,10 @@ Set the hover proximity (in pixels) to control how close the cursor must be to a
 
 ![Adding a hover proximity limit for tooltips](/media/docs/grafana/gif-grafana-10-4-hover-proximity.gif)
 
+### Max height
+
+Set the maximum height of the tooltip box. The default is 600 pixels.
+
 ### Show histogram (Y axis)
 
 For the heatmap visualization only, when you set the **Tooltip mode** to **Single**, the **Show histogram (Y axis)** option is displayed. This option controls whether or not the tooltip includes a histogram representing the y-axis.

docs/sources/panels-visualizations/visualizations/bar-chart/index.md

@@ -129,7 +129,13 @@ Transparency of the gradient is calculated based on the values on the y-axis. Op
 
 Gradient color is generated based on the hue of the line color.
 
-{{< docs/shared lookup="visualizations/tooltip-mode.md" source="grafana" version="<GRAFANA VERSION>" >}}
+## Tooltip options
+
+{{< docs/shared lookup="visualizations/tooltip-options-1.md" source="grafana" version="<GRAFANA_VERSION>" >}}
+
+## Legend options
+
+Legend options control the series names and statistics that appear under or to the right of the graph.
 
 {{< docs/shared lookup="visualizations/legend-mode.md" source="grafana" version="<GRAFANA VERSION>" >}}
 
@@ -191,7 +197,7 @@ Set a **Soft min** or **soft max** option for better control of Y-axis limits. B
 
 You can set standard min/max options to define hard limits of the Y-axis. For more information, refer to [Standard options definitions][].
 
-{{< docs/shared lookup="visualizations/multiple-y-axes.md" source="grafana" version="<GRAFANA VERSION>" leveloffset="+2" >}}
+{{< docs/shared lookup="visualizations/multiple-y-axes.md" source="grafana" version="<GRAFANA_VERSION>" leveloffset="+2" >}}
 
 {{% docs/reference %}}
 [Add a field override]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/configure-overrides#add-a-field-override"

docs/sources/panels-visualizations/visualizations/candlestick/index.md

@@ -114,6 +114,10 @@ If your data can't be mapped to these dimensions for some reason (for example, b
 
 The candlestick visualization is based on the time series visualization. It can visualize additional data dimensions beyond open, high, low, close, and volume The **Include** and **Ignore** options allow it to visualize other included data such as simple moving averages, Bollinger bands and more, using the same styles and configurations available in the [time series][time series visualization] visualization.
 
+## Tooltip options
+
+{{< docs/shared lookup="visualizations/tooltip-options-2.md" source="grafana" version="<GRAFANA_VERSION>" >}}
+
 {{% docs/reference %}}
 [time series visualization]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/visualizations/time-series"
 [time series visualization]: "/docs/grafana-cloud/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/visualizations/time-series"

docs/sources/panels-visualizations/visualizations/heatmap/index.md

@@ -150,9 +150,25 @@ Use these settings to refine your visualization.
 
 ### Tooltip
 
-- **Show tooltip -** Show heatmap tooltip.
-- **Show Histogram -** Show a Y-axis histogram on the tooltip. A histogram represents the distribution of the bucket values for a specific timestamp.
-- **Show color scale -** Show a color scale on the tooltip. The color scale represents the mapping between bucket value and color.
+#### Tooltip mode
+
+When you hover your cursor over the visualization, Grafana can display tooltips. Choose how tooltips behave.
+
+- **Single -** The hover tooltip shows only a single series, the one that you are hovering over on the visualization.
+- **All -** The hover tooltip shows all series in the visualization. Grafana highlights the series that you are hovering over in bold in the series list in the tooltip.
+- **Hidden -** Do not display the tooltip when you interact with the visualization.
+
+Use an override to hide individual series from the tooltip.
+
+#### Show histogram (Y axis)
+
+When you set the **Tooltip mode** to **Single**, this option is displayed. This option controls whether or not the tooltip includes a histogram representing the y-axis.
+
+#### Show color scale
+
+When you set the **Tooltip mode** to **Single**, this option is displayed. This option controls whether or not the tooltip includes the color scale that's also represented in the legend. When the color scale is included in the tooltip, it shows the hovered value on the scale:
+
+![Heatmap with a tooltip displayed showing the hovered value reflected in the color scale](/media/docs/grafana/panels-visualizations/screenshot-heatmap-tooltip-color-scale-v11.0.png)
 
 ### Legend
 

docs/sources/panels-visualizations/visualizations/pie-chart/index.md

@@ -80,7 +80,9 @@ The following example shows a pie chart with **Name** and **Percent** labels dis
 
 ![Pie chart labels](/static/img/docs/pie-chart-panel/pie-chart-labels-7-5.png)
 
-{{< docs/shared lookup="visualizations/tooltip-mode.md" source="grafana" version="<GRAFANA VERSION>" >}}
+## Tooltip options
+
+{{< docs/shared lookup="visualizations/tooltip-options-1.md" source="grafana" version="<GRAFANA_VERSION>" >}}
 
 ## Legend options
 

docs/sources/panels-visualizations/visualizations/state-timeline/index.md

@@ -136,6 +136,10 @@ When the legend option is enabled it can show either the value mappings or the t
 
 {{< docs/shared lookup="visualizations/legend-mode.md" source="grafana" version="<GRAFANA VERSION>" >}}
 
+## Tooltip options
+
+{{< docs/shared lookup="visualizations/tooltip-options-1.md" source="grafana" version="<GRAFANA_VERSION>" >}}
+
 {{% docs/reference %}}
 [Color scheme]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/configure-standard-options#color-scheme"
 [Color scheme]: "/docs/grafana-cloud/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/configure-standard-options#color-scheme"

docs/sources/panels-visualizations/visualizations/status-history/index.md

@@ -116,6 +116,10 @@ When the legend option is enabled it can show either the value mappings or the t
 
 {{< docs/shared lookup="visualizations/legend-mode.md" source="grafana" version="<GRAFANA VERSION>" >}}
 
+## Tooltip options
+
+{{< docs/shared lookup="visualizations/tooltip-options-1.md" source="grafana" version="<GRAFANA_VERSION>" >}}
+
 {{% docs/reference %}}
 [Value mappings]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/configure-value-mappings"
 [Value mappings]: "/docs/grafana-cloud/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/configure-value-mappings"

docs/sources/panels-visualizations/visualizations/time-series/index.md

@@ -52,19 +52,13 @@ The following video guides you through the creation steps and common customizati
 
 ## Tooltip options
 
-Tooltip options control the information overlay that appears when you hover over data points in the graph.
-
-{{< docs/shared lookup="visualizations/tooltip-mode.md" source="grafana" version="<GRAFANA VERSION>" >}}
-
-### Hover proximity
-
-This option controls how close your cursor must be to a data point before the tooltip appears. Values are in pixels.
+{{< docs/shared lookup="visualizations/tooltip-options-2.md" source="grafana" version="<GRAFANA_VERSION>" >}}
 
 ## Legend options
 
-Legend options control the series names and statistics that appear under or to the right of the graph.
+Legend options control the series names and statistics that appear under or to the right of the visualization.
 
-{{< docs/shared lookup="visualizations/legend-mode.md" source="grafana" version="<GRAFANA VERSION>" >}}
+{{< docs/shared lookup="visualizations/legend-mode.md" source="grafana" version="<GRAFANA_VERSION>" >}}
 
 ## Graph styles
 

docs/sources/panels-visualizations/visualizations/trend/index.md

@@ -38,6 +38,10 @@ For example, you could represent engine power and torque versus speed where spee
 
 {{< figure src="/media/docs/grafana/screenshot-grafana-10-0-trend-panel-new-colors.png" max-width="750px" caption="Trend engine power and torque curves" >}}
 
+## Tooltip options
+
+{{< docs/shared lookup="visualizations/tooltip-options-2.md" source="grafana" version="<GRAFANA_VERSION>" >}}
+
 {{% docs/reference %}}
 [Time series visualization]: "/docs/grafana/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/visualizations/time-series"
 [Time series visualization]: "/docs/grafana-cloud/ -> /docs/grafana/<GRAFANA VERSION>/panels-visualizations/visualizations/time-series"

docs/sources/panels-visualizations/visualizations/xy-chart/index.md

@@ -132,9 +132,20 @@ Set the width of the lines in pixels.
 
 ## Tooltip options
 
-Tooltip options control the information overlay that appears when you hover over data points in the graph.
+Tooltip options control the information overlay that appears when you hover over data points in the visualization.
 
-{{< docs/shared lookup="visualizations/tooltip-options-2.md" source="grafana" version="<GRAFANA VERSION>" >}}
+### Tooltip mode
+
+When you hover your cursor over the visualization, Grafana can display tooltips. Choose how tooltips behave.
+
+- **Single -** The hover tooltip shows only a single series, the one that you are hovering over on the visualization.
+- **Hidden -** Do not display the tooltip when you interact with the visualization.
+
+Use an override to hide individual series from the tooltip.
+
+### Max height
+
+Set the maximum height of the tooltip box. The default is 600 pixels.
 
 ## Legend options
 

docs/sources/shared/visualizations/tooltip-mode.md

@@ -1,13 +0,0 @@
----
-title: Tooltip mode
----
-
-### Tooltip mode
-
-When you hover your cursor over the visualization, Grafana can display tooltips. Choose how tooltips behave.
-
-- **Single -** The hover tooltip shows only a single series, the one that you are hovering over on the visualization.
-- **All -** The hover tooltip shows all series in the visualization. Grafana highlights the series that you are hovering over in bold in the series list in the tooltip.
-- **Hidden -** Do not display the tooltip when you interact with the visualization.
-
-Use an override to hide individual series from the tooltip.

docs/sources/shared/visualizations/tooltip-options-1.md

@@ -0,0 +1,31 @@
+---
+title: Tooltip mode
+comments: |
+  There are two tooltip shared files, tooltip-options-1.md and tooltip-options-2.md, to cover the most common combinations of options. 
+  Using two shared files ensures that content remains consistent across visualizations that share the same options and users don't have to figure out which options apply to a specific visualization when reading that content. 
+  This file is used in the following visualizations: bar chart, pie chart, state timeline, status history
+---
+
+Tooltip options control the information overlay that appears when you hover over data points in the visualization.
+
+### Tooltip mode
+
+When you hover your cursor over the visualization, Grafana can display tooltips. Choose how tooltips behave.
+
+- **Single -** The hover tooltip shows only a single series, the one that you are hovering over on the visualization.
+- **All -** The hover tooltip shows all series in the visualization. Grafana highlights the series that you are hovering over in bold in the series list in the tooltip.
+- **Hidden -** Do not display the tooltip when you interact with the visualization.
+
+Use an override to hide individual series from the tooltip.
+
+### Values sort order
+
+When you set the **Tooltip mode** to **All**, the **Values sort order** option is displayed. This option controls the order in which values are listed in a tooltip. Choose from the following:
+
+- **None** - Grafana automatically sorts the values displayed in a tooltip.
+- **Ascending** - Values in the tooltip are listed from smallest to largest.
+- **Descending** - Values in the tooltip are listed from largest to smallest.
+
+### Max height
+
+Set the maximum height of the tooltip box. The default is 600 pixels.

docs/sources/shared/visualizations/tooltip-options-2.md

@@ -1,19 +1,36 @@
 ---
 title: Tooltip options
+comments: |
+  There are two tooltip shared files, tooltip-options-1.md and tooltip-options-2.md, to cover the most common combinations of options. 
+  Using two shared files ensures that content remains consistent across visualizations that share the same options and users don't have to figure out which options apply to a specific visualization when reading that content. 
+  This file is used in the following visualizations: candlestick, time series, trend
 ---
 
+Tooltip options control the information overlay that appears when you hover over data points in the visualization.
+
 ### Tooltip mode
 
 When you hover your cursor over the visualization, Grafana can display tooltips. Choose how tooltips behave.
 
 - **Single -** The hover tooltip shows only a single series, the one that you are hovering over on the visualization.
+- **All -** The hover tooltip shows all series in the visualization. Grafana highlights the series that you are hovering over in bold in the series list in the tooltip.
 - **Hidden -** Do not display the tooltip when you interact with the visualization.
 
 Use an override to hide individual series from the tooltip.
 
-### Max width
+### Values sort order
+
+When you set the **Tooltip mode** to **All**, the **Values sort order** option is displayed. This option controls the order in which values are listed in a tooltip. Choose from the following:
+
+- **None** - Grafana automatically sorts the values displayed in a tooltip.
+- **Ascending** - Values in the tooltip are listed from smallest to largest.
+- **Descending** - Values in the tooltip are listed from largest to smallest.
+
+### Hover proximity
+
+Set the hover proximity (in pixels) to control how close the cursor must be to a data point to trigger the tooltip to display.
 
-Set the maximum width of the tooltip box. The default is 300 pixels.
+![Adding a hover proximity limit for tooltips](/media/docs/grafana/gif-grafana-10-4-hover-proximity.gif)
 
 ### Max height