Custom tool tip formatting

[Zirva]

I want to customise tool tip to show on hovering the following format

Year
ProductName
Contracts: 15.5K 

However when i do the following, it shows me all in the same line: 
=Year & ' ' & ProductName & Chr(10) & 'Contracts: ' & Count(distinct Contracts)
Please suggest how to achieve line breaks/desired format.

Instead of Chr(10) i have also tried Chr(13) & Chr(10)  and Chr(8232) but none worked. 

[rodrigo_martins]

Hello @Zirva ,

To make Chr(10) work you need to add the custom CSS below to the sheet.

.pic-tooltip-content td { white-space: pre; }

You can do this through Multi-KPI.

Hope it helps!

[steeefan]

Have you tried <br>?

[Zirva]

It doesnt identify <br> also, it reflects <br> as it is in the tool tip

[Zirva]

Can you please explain a little further? The custom css option appears only in a few places and mainly the multi kpi but the tool tips that I want to customise are all sorts of charts and maps where I dont see the custom css option. 

[rodrigo_martins]

Sure!

Multi-KPI is used to inject customized CSS into the sheet. The CSS that I provided in my answer will affect all tooltips that appear on this sheet. It is not necessary to add CSS to each component (nor is it possible, as you yourself noted, since they do not have this style field).

Another option would be to develop a custom theme (from an existing qlik theme) including this style rule. This way you wouldn't need to inject CSS via Multi-KPI.

About the rule itself: the custom tooltip content is rendered in a table format, so each element (title, description, measures, etc.) is rendered in a <tr><td> structure. Additionally, all your content is placed inside a div with the pic-tooltip-content class. This way the ".pic-tooltip-content td" selector ensures that I am only manipulating the elements I want. The white-space: pre CSS property has the following documentation:

It is important to understand that this solution is a workaround, and that in a possible future Qlik update that changes something in the visual part (for example, the name of the pic-tooltip-content class or the table structure in which the tooltip is rendered), this solution may no longer work.

[rodrigo_martins]

Hello @steeefan,

I tested with <br> and it didn't work (with and without CSS). I believe it is because the tooltip component renders its content via javascript, treating everything that comes from the graphic component as simple text, and for <br> to work it would be necessary to process the content as html elements. But I'm just guessing now 😁