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
This commit is contained in:
Isabel Matwawana 2024-04-24 12:40:27 -04:00 committed by GitHub
parent 53ead9904d
commit 0e81fdffbe
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
13 changed files with 116 additions and 32 deletions

View File

@ -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.

View File

@ -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"

View File

@ -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"

View File

@ -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

View File

@ -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

View File

@ -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"

View File

@ -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"

View File

@ -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

View File

@ -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"

View File

@ -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

View File

@ -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.

View File

@ -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.

View File

@ -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
Set the maximum width of the tooltip box. The default is 300 pixels.
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.
![Adding a hover proximity limit for tooltips](/media/docs/grafana/gif-grafana-10-4-hover-proximity.gif)
### Max height