Jazz up those tooltips with custom text & visualizations

At Tableau CRM (Formerly Einstein Analytics), the authoring experience team is particularly obsessed with enabling users to build rich, engaging analytical experiences that include fluid layouts, interactions, navigation & beautiful animations to break the mold of endless grids of static visualizations. As we explore new paradigms for presenting insights, ‘Progressive Disclosure’ is an interaction design pattern that has continued to inspire us. 

Dashboard pages allow analytical content to be divided into consumable pieces. They allow users to switch between a 10,000 ft view or dive deep. Pages allow you to place an insight under a microscope. However, sometimes users just want to peruse quick related content without jumping into details. This is where tooltips can help. Tooltips can allow you to hold a magnifying glass to an insight. What if supplemental and contextual insights were just a hover away? 

In Spring ’21, tooltips on number widgets can be customized with text & visualizations. We chose to begin with number widgets because they are one of our most popular widget types, ubiquitous, and usually what users first see on a dashboard. 

Use Cases

Below are some ideas for incorporating custom tooltips into your dashboard. 

Definition/Onboarding

The simplest use case involves adding custom text that can serve as KPI definition/onboarding. New lines are supported so you can break down a long text into paragraphs. 

Pro Tip: You can include the URL to additional documentation in the tooltip. While this will not be rendered as a clickable link, users can easily grab the URL with a couple of clicks.

Trend/Categorical Breakdown

Charts in tooltips can be a quick way to show trends and categorical breakdowns for metrics. 

Pro Tip: Turn off legends, axis labels & other formatting to create minimalistic charts that look good in a tooltip.

Record Details

Add a table to the tooltip to show record level breakdown such as top 5 opportunities in the commit pipeline. All table types are supported.

Pro Tip: Enable record actions & 1-click table actions to open records and take action directly from the tooltip.

How to get started? 

Authors can rejoice because custom tooltips are easy to experiment with & add to existing dashboards since they do not involve modifying existing queries or moving widgets around. Do try it out!

Check out the Release Notes for a quick overview of how to get started. 

Tips & Considerations

Tooltip Design & Consumption

• Format your visualizations to suit the limited real estate of tooltips. With charts, hide unnecessary elements such as legends & axis labels. For tables, use dense spacing, reduced font sizes & limit rows to create compact tables. 
• Tooltips cannot overflow embedded dashboard boundaries so customize tooltip sizing to be less than the width & height of the embedded container. 
• Record actions work in tooltip visualizations! Enable record actions & 1-click table actions to open records and take action directly from the tooltip.
• There is a slightly increased delay before a custom tooltip is rendered after mouse is hovered over a widget. This was done to prevent unnecessary renders as the user moves their mouse across a dashboard. 
• Ensure tooltip queries are optimized for performance so that they can load quickly. Avoid expensive queries for the best user experience. 

Tooltip Configuration

• Most tooltips will likely use the same dataset for the visualization as the one used by the parent number widget. This ensures filters are correctly applied. If you need to show insights from a different dataset then ensure data source links are setup to allow filters to be propagated correctly. 
• Make note of the query ID before you customize the tooltip. This will be useful if you need to use “Add Query Data” as it will make it easier to find the query. Query ID can be found under the Query tab in the right panel. 
• When creating the tooltip visualization in Explorer, provide a proper name using the pencil icon at the top to allow the query to be searched & managed for advanced use cases. 
• [Advanced] Are you looking to edit the tooltip query properties or access the JSON to modify faceting settings or use bindings? You can always use CMD/CTRL+E to access the entire dashboard JSON but a better alternative is to find the query in the right query panel and select “Properties” from it’s dropdown to access properties & the Advanced Editor. 
• [Advanced] Are you looking to edit tooltip visualization widget properties that cannot be done via the UI? Example: If you wish to provide custom font sizes. You can CMD/CTRL+E to access the JSON editor and find the tooltip widget’s JSON. 

What’s Ahead*

We want to support custom tooltips on more widget types such as charts, tables, text & more. Tell us which widget you would like to see supported in the Tableau CRM Trailblazer Community or in the comments section below. 

We also want to support richer content inside tooltips such as rich text formatting, embedding components as well as allow enhanced interactivity & actionability. 

More Resources

• Check out the Release Notes for a quick overview of the feature. 
• Have questions? Ask in the Tableau CRM Trailblazer Community

*Forward-looking statement

This content contains forward-looking statements that involve risks, uncertainties, and assumptions. If any such uncertainties materialize or if any of the assumptions proved incorrect, the results of salesforce.com, inc. could differ materially from the results expressed or implied by the forward-looking statements we make.

Any unreleased services or features referenced in this document or other presentations, press releases or public statements are not currently available and may not be delivered on time or at all. Customers who purchase our services should make the purchase decisions based upon features that are currently available. Salesforce.com, inc. assumes no obligation and does not intend to update these forward-looking statements.

Written by