This blog on customizing Tooltips is part of the Tooltip and Data Label Customization blog series.
Tooltips help in providing end-users with additional information while effectively utilizing the real estate available. They declutter your visualization and provide a clean look which makes it more effective for consuming information with the ability to see additional details, if desired.
Tooltips with Images are useful in many situations, especially when reading through a large list of items where it is hard to picture the individual items due to large volumes of unique products. For example, imagine a store manager of a retail outlet looking at the top 10 SKUs by sales for a given product line. For someone viewing hundreds of SKUs, it would be difficult for them to recall each individual item, but what if they could look at the images along with the product names and necessary information in tooltip? Wouldn’t it be easier for them to visualize each SKU?
How to display Images in a Tooltip
To illustrate this use case, let’s take the same example of displaying the top 10 SKUs by sales for a given product using a column chart showcasing the customized tooltip in SAP Lumira Designer (formerly known as SAP Design Studio) using VBX.
For this, we will be making use of the VBX Scripting box, a component designed to allow use of JavaScript as part of your dashboard to achieve out of box capabilities and the Custom Theme property in VBX Column chart.
First, let’s paste the following piece of code into the custom theme property of the column Chart. This code fetches the images at runtime from the specified location by appending the product names to the links header. This way it can locate the image and display it in the tooltip dynamically on hover.
Next, we will be using the VBX script box to map the different products to their respective images.
Finally, we have our Chart with Custom Tooltip displaying the images!
The addition of images in tooltips not only made it look more appealing, but also makes it intuitive for the users to understand the information readily as images are something the users can relate to easily.
If you would like to try the custom tooltip and Data labels, you could do so by downloading the FREE 15-day trial of VBX