Skip to main content
Announcements
Have questions about Qlik Connect? Join us live on April 10th, at 11 AM ET: SIGN UP NOW
cancel
Showing results for 
Search instead for 
Did you mean: 
Karthik3
Creator III
Creator III

How to change the background colour of a tooltip?

How to change the background color of a tooltip for a pie chart?

Capture.PNG

I tried editing the theme json file. I was able to edit the caption font colour and the background colour of the caption but not the main background colour behind behind share, region etc.

Any help greatly appreciated.

1 Solution

Accepted Solutions
Karthik3
Creator III
Creator III
Author

got this working by below

.qv-object-piechart .qv-viz-disclaimer {

    color: #6908ac;

}

.qv-object-piechart .qv-viz-center-disclaimer {

    color: #6908ac;

}

View solution in original post

14 Replies
m_s
Partner - Creator II
Partner - Creator II

Hello Karthik,

as a last resort you could try to add an "empty" extension that only injects css into the page (will atleast use up one tile). Something like:

define( ["qlik", "jquery" ],function ( qlik, $ ) {

return {

paint: function (element, layout) {

var color = 'red'; // maybe put this into setting?

var tooltipFix =

'<style id="tooltipFix">' +

'.qvt-chart-tooltip {background-color: ' + color + ' !important; }' +

'.qv-chart-tooltip-content table {background: ' + color + ' !important; }' +

'.qvt-chart-tooltip .immidiate-contextual-arrow { border-color: ' + color + ' !important; }' +

'</style>';

if($('#tooltipFix').length == 0)

$('head').append(tooltipFix);

$(element).html('loaded');

}

};

} );

Or maybe just add the css-properties to your theme.css if you're able to modify it?

Mathias

Karthik3
Creator III
Creator III
Author

is this typo correct .qv-chart-tooltip-content table ?

m_s
Partner - Creator II
Partner - Creator II

I don't think there's a typo, this extension should work as is.

Although I just realized you should switch

     '.qvt-chart-tooltip .immidiate-contextual-arrow { border-color: ' + color + ' !important; }' +

with

     '.qvt-chart-tooltip .immidiate-contextual-arrow { border-bottom: 10px solid ' + color +' !important; }' +

if you want a real down-arrow.

red.png

Mathias

Karthik3
Creator III
Creator III
Author

Thanks Mathias. I need to be able to edit the current tooltip code rather than creating an extension. I will continue my search?

One more question: Is it possible to change the formatting of 'Condition Unfulfilled' message for a pie chart?

m_s
Partner - Creator II
Partner - Creator II

You stated that you modified your theme.json. If you're able to do that try adding the following to your theme.css:

.qvt-chart-tooltip {background-color: red !important; }

.qv-chart-tooltip-content table {background: red !important; }

.qvt-chart-tooltip .immidiate-contextual-arrow { border-bottom: 10px solid red !important; }

Yes this is also possible via CSS:

     .qv-object-piechart .object-error-message { background: red; }

Mathias

Karthik3
Creator III
Creator III
Author

C1.PNG

Applied your code. Thanks. Red colour is not getting picked up for share background. Blue colour is eventually the one I want the entire tooltip to be.

m_s
Partner - Creator II
Partner - Creator II

Hmm, maybe you're not on September 2017 yet and thats why its different.

Try adding div#qs-chart-tooltip * { background: red !important; }

If that does not work you should use the Chrome Developer Tools to manually modify the css and see what kind of styles to apply.


Mathias

Karthik3
Creator III
Creator III
Author

That worked. Thanks a lot. One more question if you don't mind:

C2.PNG

Can we change the font colour and style of the error message returned(screenshot above) for a pie chart?

m_s
Partner - Creator II
Partner - Creator II

Try:

.qv-object-piechart .qv-viz-center-disclaimer { background: red !important; }

Mathias