Anywhere on the dashboard, I mean. This is a sequel to Creating Visual Tooltips.

In that post, we mentioned some limitations of the method:

- Data marks, when under a tooltip sheet, are insensitive to mouse hovering
- Transitional lighting effect before a tooltip shows

Here we present a solution by which those limitations can be minimized or removed. The new solution will use a method based on vertical containers, in which, a sheet will collapse if not selected.

The main steps are as follows, assuming you have all the tooltip sheets ready.

1. Create your primary worksheet and drag it to a dashboard canvas. It could be a map or a chart where you want to add some visual tooltips.

2. Drag as many containers (in Floating mode) as tooltips into the dashboard canvas. Place them near the relevant data marks, or even on top of them if you wish.

3. Drag each tooltip sheet (in Tiled mode) into one vertical container. Set the sheet to Entire View.

4. Set up the action filter.

5. Publish it to the server. (The tooltips are only fully functional on the server.)

Here are a couple of examples using the technique. Click images to view or download the interactive versions.

Tableau Ambassador 2016 V2.0
Bar Chart with Visual Tooltips V2.0
Creating the tooltip sheets

1. Create a master tooltip sheet (that is going to be filtered by an action filter on a few dimensions).

2. Duplicate it as many times as necessary for each data mark that you want to place a tooltip. (I suggest only duplicating a few first. Test them until the design is stabilized.)

3. Create a filter for every tooltip sheet. (I create a single member set as the filter.) Place the filter in the filter shelf.
4. Set each filter to be a context filter. This may make the tooltips show up quicker.

In the ambassador viz, there are 13 members so that we need to create 13 tooltip sheets. In the bar chart example, we need to create 4 tooltip sheets.

Check them out. The tooltip containers are placed randomly. Some are on top of the data marks they are associated with. But the area in the data marks are still sensitive to the mouse (Only on server though).

The transitional lighting effect is minimized. Now we might see some very thin lines lighting up briefly. It is not as visible as in the original ambassador viz or in the original bar chart example.

Discrepancy between Tableau Desktop and Server renditions

It is a bit of surprise that the desktop and server render the workbook differently. I would expect some difference but not so significant.

On desktop, a tooltip sheet on top of a data mark won't show up if I hover my mouse over the data mark.

Instead, on server, there is no problem. A rather curious discrepancy.

That's all. Hope that it can be useful to you guys.


0

Add a comment

(Refresh the page if you want to view the gif image multiple times. Or go to Tableau Public and click the button at the top-right corner.)

Jake and I collaborated on a dashboard. He told me that he learnt a way to create an in-place help page in Tableau. He first saw it at a conference somewhere and couldn't recall who the speaker was. So I am blogging here about it but the credit goes to somebody else. If anyone knows who the original creator is, leave a comment below.

The key idea is to float a semi transparent worksheet on top of the dashboard, where a help text box is strategically placed on top of each chart. This way, we can explain how to view each chart and what data points are important, etc. This worksheet is collapsible by a show/hide button. 

Below I would like to show how this worksheet can be constructed.

1. Sheet with a single data mark.

  • Double click the empty space in Marks panel and add two single quotes. Make the null pill a text label. This creates a single null mark.
  • Set the view as "Entire View"

2. Create an show/hide button

  • Go to the target dashboard
  • Drag a floating vertical container to the dashboard, making it cover all the area of interest.
  • Drag the Single Null Mark sheet and drop it into the above container. Hide the sheet title.
  • Create an open/close button for the container and place the button at the top-right corner.

3. Add annotations

  • Format the sheet background opacity as 70% in the layout manager             
  • Select area annotations and place them anywhere of interest. 
  • Write help text and format it to highlight important messages.  
  • The text can serve as functional guide and/or insight guide.

Here is an example. Feel free to download the workbook and explore. Click the "i" button at the top-right corner to view the in-place help. 

0

Add a comment

Blog Archive
Loading
Dynamic Views theme. Powered by Blogger. Report Abuse.