https://community.qlik.com/t5/Member-Articles/Adding-tooltips-to-Qlik-Objects/ta-p/2049186 <P>Hello, everyone, hope you are doing great <span class="lia-unicode-emoji" title=":slightly_smiling_face:">🙂</span></P> <P>I will divide this post in 3 parts: 1 - the problem to you understand when to use this, 2 -&nbsp; 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.</P> <P><STRONG>The problem</STRONG></P> <P>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.&nbsp;</P> <P><STRONG>The solution</STRONG></P> <P>Create hidden messages that only appear when the user hover their mouse on some Qlik object.</P> <P>We can do this creating tooltips using CSS on Qlik.</P> <P> <span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="tooltip gif.gif" style="width: 400px;"><img src="https://community.qlik.com/t5/image/serverpage/image-id/102772iFE5B18569D13C958/image-size/medium?v=v2&amp;px=400" role="button" title="tooltip gif.gif" alt="tooltip gif.gif" /></span></P> <P>&nbsp;</P> <P><STRONG>How to do it?</STRONG></P> <P>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 -&gt; Share - &gt; Embed. Then you copy the object id:</P> <P><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="rpennacchi_3-1678812646187.png" style="width: 400px;"><img src="https://community.qlik.com/t5/image/serverpage/image-id/102760i2921194C5B2CF647/image-size/medium?v=v2&amp;px=400" role="button" title="rpennacchi_3-1678812646187.png" alt="rpennacchi_3-1678812646187.png" /></span></P> <P>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.&nbsp;</P> <P><FONT size="1 2 3 4 5 6 7">/* TOOLTIP ON KPI*/</FONT><BR /><FONT size="1 2 3 4 5 6 7">[tid="<STRONG>OBJECT_ID</STRONG>"]:after{</FONT><BR /><FONT size="1 2 3 4 5 6 7">visibility: hidden;</FONT><BR /><FONT size="1 2 3 4 5 6 7">width: 80%;</FONT><BR /><FONT size="1 2 3 4 5 6 7">background-color: #4477aa;</FONT><BR /><FONT size="1 2 3 4 5 6 7">color: #fff;</FONT><BR /><FONT size="1 2 3 4 5 6 7">text-align: center;</FONT><BR /><FONT size="1 2 3 4 5 6 7">border-radius: 6px;</FONT><BR /><FONT size="1 2 3 4 5 6 7">padding: 5px 10px;</FONT><BR /><FONT size="1 2 3 4 5 6 7">margin: 10px;</FONT><BR /><FONT size="1 2 3 4 5 6 7">content: "<STRONG>This is a personalized tooltip message for a KPI</STRONG>.";</FONT><BR /><FONT size="1 2 3 4 5 6 7">left: 10%;</FONT></P> <P><FONT size="1 2 3 4 5 6 7">position: absolute;</FONT><BR /><FONT size="1 2 3 4 5 6 7">z-index: 1000;</FONT><BR /><FONT size="1 2 3 4 5 6 7">}</FONT><BR /><FONT size="1 2 3 4 5 6 7">[tid="<STRONG>OBJECT_ID</STRONG>"]:hover:after{</FONT><BR /><FONT size="1 2 3 4 5 6 7">visibility: visible;</FONT><BR /><FONT size="1 2 3 4 5 6 7">}</FONT></P> <P>Once you have corrected this. Add a multi-KPI on your dashboard and add a valid measure.&nbsp;</P> <P><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="rpennacchi_1-1678821648808.png" style="width: 238px;"><img src="https://community.qlik.com/t5/image/serverpage/image-id/102773i991DDE54CB1DA799/image-dimensions/238x222?v=v2" width="238" height="222" role="button" title="rpennacchi_1-1678821648808.png" alt="rpennacchi_1-1678821648808.png" /></span></P> <P>PS.: You can hide this object with this CSS code:&nbsp;</P> <P>.qv-object-qlik-multi-kpi { display:none; }</P> <P>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 -&gt; Styles -&gt; Stylec (css). And then paste your CSS code.</P> <P>Now when you move your cursos over your object, you will see the tooltip message.&nbsp;</P> <P>&nbsp;</P> <P>&nbsp;</P> <P>&nbsp;</P> <P>&nbsp;</P> Tue, 14 Mar 2023 19:25:47 GMT rpennacchi 2023-03-14T19:25:47Z https://community.qlik.com/t5/Member-Articles/Adding-tooltips-to-Qlik-Objects/ta-p/2049186 <P>In this post I will share with you how to create tooltips using CSS on Qlik Objects.</P> Tue, 14 Mar 2023 19:25:47 GMT https://community.qlik.com/t5/Member-Articles/Adding-tooltips-to-Qlik-Objects/ta-p/2049186 rpennacchi 2023-03-14T19:25:47Z