Adding tooltips to Qlik Objects

[rpennacchi]

Hello, everyone, hope you are doing great 🙂

I will divide this post in 3 parts: 1 - the problem to you understand when to use this, 2 -  the solution to show what you will have as result and 3 - how to do it in order to explain how you can do it.

The problem

Often I get business users asking to add some notes on the app to explain or alert the users about how to analyze their data properly. But sometimes doing that takes some precious space on the app. 

The solution

Create hidden messages that only appear when the user hover their mouse on some Qlik object.

We can do this creating tooltips using CSS on Qlik.

 

How to do it?

First step is to find the id of your object. You can do that by going oo your sheet in visualization mode, right click on your object -> Share - > Embed. Then you copy the object id:

After you have the id, you need to edit this css code correcting the OBJECT_ID (it appears twice) and the message on the CONTENT parameter. 

/* TOOLTIP ON KPI*/
[tid="OBJECT_ID"]:after{
visibility: hidden;
width: 80%;
background-color: #4477aa;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 10px;
margin: 10px;
content: "This is a personalized tooltip message for a KPI.";
left: 10%;

position: absolute;
z-index: 1000;
}
[tid="OBJECT_ID"]:hover:after{
visibility: visible;
}

Once you have corrected this. Add a multi-KPI on your dashboard and add a valid measure. 

PS.: You can hide this object with this CSS code: 

.qv-object-qlik-multi-kpi { display:none; }

The final step is to paste your css code on you multi-kpi object. You need to select your multi-kpi object and go to Appearence -> Styles -> Stylec (css). And then paste your CSS code.

Now when you move your cursos over your object, you will see the tooltip message.