Files
grafana/docs/sources/panels-visualizations/configure-tooltips/index.md
T
Isabel Matwawana 1aae7a417b [v10.4.x] Docs: add tooltips shared content (#88185)
* 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

(cherry picked from commit 0e81fdffbe)

* Removed xy chart

* Removed docs reference shortcode
2024-05-22 15:00:59 -04:00

7.1 KiB

aliases, keywords, labels, menuTitle, title, description, weight, refs
aliases keywords labels menuTitle title description weight refs
grafana
tooltips
documentation
products
cloud
enterprise
oss
Configure tooltips Configure tooltips Configure tooltips for your visualizations 75
state-timeline bar-chart heatmap trend geomaps candlestick flame-graph pie-chart time-series status-history field-override
pattern destination
/docs/grafana/ /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/visualizations/state-timeline/
pattern destination
/docs/grafana-cloud/ /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/state-timeline/
pattern destination
/docs/grafana/ /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/visualizations/bar-chart/
pattern destination
/docs/grafana-cloud/ /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/bar-chart/
pattern destination
/docs/grafana/ /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/visualizations/heatmap/
pattern destination
/docs/grafana-cloud/ /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/heatmap/
pattern destination
/docs/grafana/ /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/visualizations/trend/
pattern destination
/docs/grafana-cloud/ /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/trend/
pattern destination
/docs/grafana/ /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/visualizations/geomap/#tooltip
pattern destination
/docs/grafana-cloud/ /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/geomap/#tooltip
pattern destination
/docs/grafana/ /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/visualizations/candlestick/
pattern destination
/docs/grafana-cloud/ /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/candlestick/
pattern destination
/docs/grafana/ /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/visualizations/flame-graph/
pattern destination
/docs/grafana-cloud/ /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/flame-graph/
pattern destination
/docs/grafana/ /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/visualizations/pie-chart/
pattern destination
/docs/grafana-cloud/ /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/pie-chart/
pattern destination
/docs/grafana/ /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/visualizations/time-series/
pattern destination
/docs/grafana-cloud/ /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/time-series/
pattern destination
/docs/grafana/ /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/visualizations/status-history/
pattern destination
/docs/grafana-cloud/ /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/status-history/
pattern destination
/docs/grafana/ /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/configure-overrides/
pattern destination
/docs/grafana-cloud/ /docs/grafana-cloud/visualizations/panels-visualizations/configure-overrides/

Configure tooltips

{{< docs/public-preview product="The new tooltip experience" featureFlag="newVizTooltips" >}}

When you hover your cursor over a visualization, Grafana can display tooltips that contain more information about a data point, like the exact time of a result. You can customize tooltips to control how many series they include and the order of those values. You can also copy the content from tooltips to use elsewhere. Learn more about configuring tooltips in Tooltip options.

Supported visualizations

You can configure tooltips for the following visualizations:

Bar chart State timeline
Candlestick Status history
Heatmap Time series
Pie chart Trend

Some visualizations, for example candlestick and flame graph, have tooltips, but they aren't configurable. These visualizations don't have a Tooltip section in the panel editor pane. Geomaps provide you the option to have tooltips triggered upon click or hover under the Map controls options in the panel editor pane.

Tooltip options

You can find the following options under the Tooltip section in the panel edit pane.

{{% admonition type="note" %}} Not all of the options listed apply to all visualizations with tooltips. {{% /admonition %}}

Tooltip mode

Choose how tooltips behave with the following options:

  • Single - The tooltip only the single series that you're hovering over in the visualization.
  • All - The 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 - Tooltips aren't displayed when you interact with the visualization.

You can use a field 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.

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

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.

Show color scale

For the heatmap visualization only, when you set the Tooltip mode to Single, the Show color scale 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