How to Add an Image to a Tableau Tooltip

Make tooltips more engaging and branded with custom shapes

Maximize dashboard real estate by adding any image you want to a Tableau tooltip. This video shares how to create a custom shape palette in your Tableau Repository and how to use those shapes as a ‘Viz in Tooltip’.

Hi, this is Ryan with Playfair Data TV. And in this video, I’m going to show you how to add an image to a Tableau tooltip. You might be familiar with a relatively new feature in Tableau called ‘Viz in Tooltip’, but you can also use that feature to provide images in a tooltip. I find it unlocks some interesting ways to improve the user experience, as well as your own company branding.

To illustrate how to do this, we’re going to be looking at this visualization called Where’s Ryan?. I use this visualization to track my speaking engagements. If the end user hovers over a data point, they’ll get information about the speaking engagement, and they can click on it to open the URL to register.

Well, we’re going to make this experience a little bit better. For my speaking engagements where I’m doing a public training event, I create product images. So when somebody goes to buy a ticket to the event, they will see a consistent product image for that particular public training event.

What I’m going to do in this illustration is get those product images as part of the tooltip so that they have a consistent, branded experience. Everywhere from looking at this Tableau Public visualization, to going to my website, to checking out, I want them to consistently see that same image. So that’s what I’m going to do here. And I’m going to add that image to the tooltips where I have a public training event.

This involves a couple steps. The first thing we need to do is get those images into a folder on our computer called Shapes within the My Tableau Repository. If you’re not familiar with this, when you install Tableau, it automatically puts a folder within your Documents directory called My Tableau Repository. This includes several different things related to your installation of Tableau, but one of the folders within that repository is called Shapes. These are the shapes that show up when you’re using a mark type of Shape on any sheet.

So some of these are the defaults that you will see. But you can also add custom shape palettes. So I’ve already gone through some of these steps, and I created a folder called Training Images. But you could do this with any images that you want. Just navigate to Documents, My Tableau Repository, Shapes, and create a new folder. Whatever images you put into that folder are going to be available to you later on when you use the Shape mark type in Tableau.

So I’ve added a folder called Training Images. Within that folder, I’ve got several different product images. And now, if I go over here to Tableau, and I’ll make a new sheet just to illustrate this to you, I’ll drag– let’s see, what would be a good one? I’ll drag Event onto the Rows Shelf, and change the mark type to Shape. Notice by default it’s a circle. But if I click on the Shape Marks Card and click More Shapes, these are the palettes that I was referring to. These palettes are going to line up with whatever you’ve got in your Tableau Repository.

Most of these come with Tableau. But as you can see, I added a custom folder called Training Images. Now I can map these different images to the shapes that are being used on the visualization. Again, I’ve taken a little bit of a shortcut just to illustrate this, and I already mapped out some of these. But I will walk you through what is being shown on this view.

I set up this very simple control sheet. It’s got the Event dimension on the Rows Shelf, and the Event dimension on the Shape Marks Card. Because that Event dimension is on the Shape Marks Card, I can encode the marks by these custom shapes. If I click on the Shape Marks Card, I can navigate to my Training Images custom palette. Click on each event, and choose the most appropriate image for that event.

This will eventually be used as my tooltip. So we’re just getting this set up. We’re just implementing these custom shapes at this point.

Now, if I wanted to add this sheet as a tooltip, we’re back to just the traditional Viz in Tooltip functionality. Let’s say we wanted to add Tableau Training with Ryan Sleeper sheet to the map view. I will navigate to my map view. Click on Tooltip. I’ll put this at the bottom of what I’ve already got there, and click this Insert key.

These are the steps, by the way, for adding any viz to a tooltip. It just so happens for this use case that our viz is just a sheet that’s full of those custom images. So I’m going to click Insert. And the very first option– those are the sheets available to me to add as a viz in a tooltip. I’m going to click Tableau Training with Ryan Sleeper. That’s the sheet that included all those images.

There’s a few options within Viz in Tooltip. You can change what fields are being used. You can also change the maximum height and width of that widget. I happen to know that all of my product images are the same size. They’re 600 by 600 pixels. So I might go ahead and just bump this up so that each image is in its intended size. It’s just full size. I’m going to click OK.

Now, when I navigate back to my main view, if an end user hovers over a city where I’ve got a public training, they will see not only the information for that training event, a call to action to click to register, but they will also see that branding with my product images. We’ve just added an image to a tooltip in Tableau. If you remember back, that functionality or that feature image was not in that tooltip before we went through those steps to set that up.

But we’ve just created a slightly more professional experience, and I just wanted to share an alternative, creative way to use Tableau’s Viz in Tooltip feature.

This has been Ryan with Playfair Data TV – thanks for watching!