In Looker visualizations, when we hover over a datapoint, the tooltip displays the value of the x-axis and y-axis fields at that datapoint. However, what if we want to display values from other fields in the tooltip? We can do this by using Liquid variables in an html parameter. Liquid is a templating language that can be used in Looker to create more dynamic content. However, before we dig into this, we will need to understand some basic concepts about using Liquid with Looker. Check out the Using Liquid Variables in the HTML Parameter and Liquid Variable Reference documentation pages for this necessary background information.

See the example below, after which we'll explain how it's done:

How It's Done

Use the following pattern to display any combination of values in a visualization. However, keep these important points in mind as you plan your visualization:

• The html parameter goes into the measure to be used as the y-axis.
• The value that you would like to display on the y-axis should be the value in the sql statement of the measure.
• When using any formatted measure (a measure of type: percent_of_total or a measure with a value_format_name or value_format parameter), make sure to use the Liquid syntax {{ field_name._rendered_value }} (where field_name is the actual name of the measure or dimension).

In this particular example, we have created a gross_margin_tier dimension by which to group the dataset, and a total_gross_margin type: sum measure as the computation.

We used the Liquid variable _rendered_value to display the formatted values of both total_gross_margin, which is formatted to two decimals, and percent_of_total_gm. These values are displayed below in the html parameter.

The goal here is to display the percent_of_total_gm for each tier's total_gross_margin within the hover-over, while keeping the y-axis distinct to the total_gross_margin.

Here's the code for the visualization and table example above:

dimension: gross_margin_tier {
  type: tier
  sql: ${gross_margin} ;;
  tiers: [0, 50, 100, 200, 400]
}

measure: percent_of_total_gm {
  type: percent_of_total
  sql: ${total_gross_margin};;
}

measure: total_gross_margin {
  type: sum
  value_format_name: decimal_2
  sql: ${gross_margin} ;;
  html: {{ rendered_value }} || {{ percent_of_total_gm._rendered_value }} of total>> ;;  ## here we use || to concatenate the values
}

Any interactive content placed in a map chart's tool tip with the html parameter will not be accessible on dashboards that use the new dashboard experience, although it will be accessible on Looks, Explores, and legacy dashboards.