Tooltips

Vizlib Tooltips is a powerful visualization capability for Vizlib products that makes it easy to add interactive tooltips to your charts and graphs. By simply hovering over a data point or element of your visualization, users can gain deeper insights and explore additional information.

This topic contains the following sections:

What is a Vizlib Tooltip?
Creation Process
Conclusion

What is a Vizlib Tooltip?

Vizlib offers two different ways of displaying data in a Tooltip: Basic and Advanced (HTML).

Basic

This is the default way that Vizlib products display information. A simple-to-read Tooltip with data that is determined by your Dimension and Measure. For example, in Figure 1, hovering over the Dimension bar Produce presents a Measure value of Budget $: 51.7M.

Figure 1: Vizlib Bar Chart's default Tooltip

Advanced (HTML)

Using HTML within a tooltip allows you to create a more insightful data exploration experience for your user. Instead of only having a single value like in the Basic Tooltip, using HTML, you have a near-infinite way of displaying data.

Watch the Vizlib Snackable webinar where Luke, one of our Vizlib Product Managers, goes into detail on how to create Tooltips with many Vizlib Products.

Creation Process

To get started with Vizlib Tooltips, you'll first need to install the Vizlib products into your Qlik Sense/SaaS server and then Create or edit existing visualizations.

You can see which Vizlib extensions enable Tooltips by viewing Vizlib Capabilities.

Step 1:

Starting from scratch the process after installing the extensions, creating a new Qlik App and connecting a data source, we can create a visualization using a Vizlib extension - in this step-by-step tutorial, we will use the Vizlib Bar Chart.

Step 2:

Define the Data for the X & Y-Axis of the Vizlib Bar Chart in the Property Panel > Data > Dimensions and Measures.

By default, Vizlib extensions will display a basic Tooltip which defines the Measure against the Dimension value.

You can stop here or if you want to improve on this even more you can then consider a HTML tooltip (step 3 onwards).

Step 3 (HTML):

The location of this Advanced/HTML Tooltip option is different for some extensions so using the Property Panel Search function to find 'HTML' will assist.

Continuing with the Vizlib Bar Chart you will find in Data > Measures an option called Custom Tooltip (support HTML). Click on the expression editor to start adding HTML.

Step 4:

To get HTML working within a Tooltip, we must include an equal sign (=) and 2 apostrophes (' ') = where the HTML content will be written between the apostrophes (' ') like so:

='HTML'

(be sure to use straight apostrophes)

Step 5:

When writing your HTML, you may find that you want to insert a Field from your data model, or use expressions such as SUM(), IF(), etc.

To use expressions or to present fields in your HTML code, you need to wrap them in an apostrophe (' ') and ampersand (&) like so:

'&Expression/Field&'

Here we have a simple example of an HTML Tooltip:

='<div> <p>'&avg(Field_Name)&'</p></div>'

Step 6:

Styling the Tooltip will help to add aesthetics to the Tooltip. For example, you may want to highlight a background or a word if you want to add some emphasis to a value.

HTML allows for CSS to be used within it with the tag Style being inserted into your HTML like so:

Let's see how this is implemented into our previous code:

='<div style="background-color:lightblue"> <p style="font-size:20px;">'&avg(Field_Name)&'</p></div>'

Step 7:

Some tooltips can be interacted with such as the Vizlib Advanced Text Object so you can add hyperlinks using the 'A tag':

Conclusion

Overall, Vizlib Tooltips is a valuable addition to your Qlik BI platform, providing a powerful and intuitive way to enhance your visualizations with interactive and informative tooltips. Whether you're a data analyst, business user, or developer, Vizlib Tooltips can help you get the most out of your data and make informed decisions based on deeper insights.

To continue your learning you can watch and download previous webinars and YouTube videos and download apps from our demo gallery on the Vizlib website.

Further resources can be found at: