Qlik Community

Qlik Sense Integration, Extensions, & APIs

Discussion board where members can learn more about Integration, Extensions and API’s for Qlik Sense.

karthikmungi3
Contributor 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
karthikmungi3
Contributor III

Re: How to change the background colour of a tooltip?

got this working by below

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

    color: #6908ac;

}

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

    color: #6908ac;

}

11 Replies
m_schindler
Contributor II

Re: How to change the background colour of a tooltip?

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

karthikmungi3
Contributor III

Re: How to change the background colour of a tooltip?

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

m_schindler
Contributor II

Re: How to change the background colour of a tooltip?

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

karthikmungi3
Contributor III

Re: How to change the background colour of a tooltip?

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_schindler
Contributor II

Re: How to change the background colour of a tooltip?

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

karthikmungi3
Contributor III

Re: How to change the background colour of a tooltip?

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_schindler
Contributor II

Re: How to change the background colour of a tooltip?

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

karthikmungi3
Contributor III

Re: How to change the background colour of a tooltip?

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_schindler
Contributor II

Re: How to change the background colour of a tooltip?

Try:

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

Mathias

Community Browser