When the ‘Viz in Tooltips’ feature became available in Tableau 10.5 in early 2018 the Tableau Community began publishing some creative use cases for this exciting new feature. Many of these are covered in this two-part blog series by Jeffrey Shaffer here. Since Tableau 10.5 we have started to take viz in tooltips for granted. I consider this to be a testament to Tableau for developing a highly sought-after, easy to use feature.
While it’s easy to insert a viz in a tooltip it can sometimes be a bit more fiddly making it look good. No fear; the community has come up with lots of innovate ways to not only display vizzes in tooltips but to actually make them visually pleasing too.
For a recent viz I wanted to experiment a little with viz in tooltips and deviate from my default tooltip style (essentially bold title (i.e. country) with a viz displayed below).
The Viz (in tooltip)
The main sheet in my viz in this case was a heatmap which showed a ‘Freedom of the Press’ score by country and year with the score value represented by colour. Here’s an extract of it:
For each country I wanted to show the changes in the score over time in a line chart held within the tooltip which is displayed when hovering over individual squares in the heatmap.
To insert a viz in tooltip you simply:
- Open the tooltip window from the marks card on the source sheet,
- Select “Insert” which appears in the top-right hand corner of the Edit Tooltip window,
- From the drop-down menu which appears, hover over “Sheets” to open a separate list of available sheet names,
- Select the relevant sheet from the list shown.
While this won’t actually display the viz in the “Edit Tooltip” window, it will display some code which looks something like this:
<Sheet name=”Line Chart” maxwidth=”300″ maxheight=”300″ filter=””>
This code shows the name of the selected sheet, the size and any filters which will be applied.
The default size for viz in tooltips is 300 x 300 and the default filter will be set to “All Fields”. This means the view is filtered on all dimensions in the current view (not including fields on the Filters shelf), at the most specific level of detail.
To show how it works, if I leave the code unedited for now and return to my viz, the viz in tooltip will display something like this:
Whilst I was expecting to see a line chart, the viz in tooltip is filtered to show a value for a single year and displays this as a dot. This is not much use seeing as I want to show trends over time!
What is happening here is the viz in tooltip is being filtered for the most specific level of detail selected in my viz (in this case year and country) and is displaying the data for that point only. While I want to display a single country on the chart in my tooltip, I don’t want to filter for a specific year since I want to show a trend in the score over time which will require all years.
You can change the level of detail for a viz in tooltip by defining what should be filtered in the tooltip text. To do this:
- Open the tooltip window from the marks card on the source sheet,
- Place your cursor within the filter value shown in your tooltip code (i.e. filter=”<place cursor here>”), and then click the Insert menu to select an available field from the list shown. Alternatively you can manually replace the <All Fields> value in the code with the name of a field in the view you would like to filter on.
- To filter for more than one selected field, simply separate the field names with a comma, i.e. filter=”<Country>,<Region>”>.
In my case I wanted to filter for country alone so my tooltip text looked like this:
<Sheet name=”Line Chart” maxwidth=”300″ maxheight=”300″ filter=”<Country>”>
Now when I check my tooltip it looks like this. Result!
Next I want to resize my viz in tooltip so the chart is slightly wider.
To do this we follow a similar approach to the previous step but this time we edit the “maxwidth” and “maxheight” values in the tooltip text until we are happy with the sizing. Remember you can always select “Preview” at the bottom of the tooltip window to get an idea of how the viz in tooltip will look (note: this view will not take into account the level of detail in your sheet so it’s always best to test it directly the sheet too).
In my case I only needed to edit the “maxwidth” value since I was happy with the height. My tooltip text now looks like so:
<Sheet name=”Line Chart” maxwidth=”400″ maxheight=”300″ filter=”<Country>”>
The Tooltip Header
I remember back when Tableau 10.5 was released, Pooja Gandhi published some vizzes in which she experimented with the new viz in tooltip functionality. In one of these examples she had created a shaded header for her tooltip. I was keen to attempt this technique myself and with some trial and error I figured out how it was achieved.
Note: Tableau does not currently enable you to change the background colour of a tooltip and it will always default to white. Now viz in tooltips are a feature there are things you can do to mimic a shaded tooltip background but they are quite complex to master. If you are interested in learning more I suggest you check out some of the vizzes published by Adam Crahen on Tableau Public.
By experimenting with the shaded header technique I was able to create a tooltip that looks like this:
I think this looks more stylish than text alone and helps to break the tooltip into sections.
Let me show you how it’s done.
- Create a new sheet and add year (as a discrete field) to columns.
- Double-click within the column shelf and write the calculation MIN(1). This will result in an aggregated continuous pill.
MIN(1) is a calculated field that creates a measure which acts as a placeholder for other measures and enables you to display elements in a more organised manner. In this instance, AGG(MIN(1)) will create identically-sized bar charts (one for each year in our data set):
We won’t be using these bar charts in their usual form. Instead they will form the basis of our tooltip header.
Next we want to remove the top and bottom headers from our view. You can do this by right-clicking on each axis and selecting “Show Header”.
For this technique to be successful we need to ensure our bar charts and the sheet background colour are the same. You can edit the bar chart colour from the marks card as normal. Whilst in the colour menu, remove the border colour from the bars (set to none). To edit the sheet background colour navigate to the “Format” option on the main toolbar and select “Shading”. Adjust the worksheet colour using the menu which appears on the left. The bars should now blend into the background and be difficult to distinguish. This is fine and exactly what we needed to happen.
Next, clean up the sheet and remove all borders and lines.
Now, select slightly above the horizontal scroll bar in the view and drag it down a little to make the chart area taller. Don’t worry too much about precision for now; you can always adjust this later.
Now we need to add some text to the header.
To do this will we add all of the fields we would like to display in the tooltip header to the labels shelf on the marks card. Simply drag them on, one by one. To adjust how these are displayed we can open up the labels menu from the marks card and select the “…” to the right of the “Text” field to open the edit label window.
This is how mine looks:
You can amend the font type, sizing, style and text placement in this window. You can also amend the text alignment as you wish using the labels menu. I opted for middle left alignment.
Please note at this stage your header worksheet will not look quite right on face value (it may even appear to be blank). Don’t worry though. It will all come together when you add the sheet to the tooltip on the source sheet.
To update the tooltip we’ll return to the source sheet we were working with before which contains our main viz. In the tooltip menu we’ll add the new header sheet to the very top of the tooltip, just like we did with the viz in tooltip we added previously. I also adjusted the width of my header sheet to 400 to align with the line chart, also displayed in the tooltip. My tooltip now looks like this:
<Sheet name=”Tooltip Header” maxwidth=”400″ maxheight=”200″ filter=”<All Fields>”>
<Sheet name=”Line Chart” maxwidth=”400″ maxheight=”300″ filter=”<Upper Country>”>
Note I did not need to change the filters on the header sheet in my tooltip as I wanted to display a unique header for every country and year. However, you could amend this as you wish using the same technique we used before.
Now when I return to the source sheet to display my tooltip it looks like this:
If your header doesn’t look quite right at this stage, return to the header sheet and manually adjust the height of the bar chart as necessary. You can also adjust the sizing in the tooltip itself but sometimes you’ll need to adjust it at source.
I hope you found this blog post helpful. If desired you could even create multiple headers to act as dividers within your tooltip. It’s really up to you how you decide to apply this technique.
You can view and download my viz which contains the tooltip used in the example here.
Thanks for reading.