lsterling03
Posts: 2
Joined: Fri Jun 26, 2020 6:14 pm

Adjust font size of tooltip title text

How can I adjust the font size of the tooltip title text? The style settings only affect the body text in the tooltip, but the tooltip title remains unaffected.

Here's my code

Code: Select all

 tooltip: {
        style: {
            color: 'blue',
            fontSize:'15px'
        }
    },
Thanks!
mateuszkornecki
Posts: 1222
Joined: Mon Oct 28, 2019 10:29 am

Re: Adjust font size of tooltip title text

Hello,

Welcome to our forum and thanks for contacting us with your question.

In order to change the font size of the tooltip header, you could use the tooltip.headerFormat.

API references:
https://api.highcharts.com/highcharts/t ... aderFormat

Live demo:
https://jsfiddle.net/BlackLabel/a1kscqr0/

​If you have further inquiries, you may reach out to me at any time.

Best regards.
Mateusz Kornecki
Highcharts Developer
lsterling03
Posts: 2
Joined: Fri Jun 26, 2020 6:14 pm

Re: Adjust font size of tooltip title text

Thanks! That solved it.
mateuszkornecki
Posts: 1222
Joined: Mon Oct 28, 2019 10:29 am

Re: Adjust font size of tooltip title text

That's great to hear! In case of any further questions, feel free to contact us again!

Regards.
Mateusz Kornecki
Highcharts Developer
Leah
Posts: 19
Joined: Thu Sep 08, 2022 11:53 am

Re: Adjust font size of tooltip title text

How do I get the font size to apply to the tooltip header, the below code makes all the text on the tooltip red, but the header is still very small?

Code: Select all

            tooltip: {
                style: {
                    fontSize: '18px',
                    color: 'red'
                }
            },
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Adjust font size of tooltip title text

Hello,

The solution to that still remains the same, maybe you've missed it.
mateuszkornecki wrote: Mon Jun 29, 2020 7:46 am Hello,

Welcome to our forum and thanks for contacting us with your question.

In order to change the font size of the tooltip header, you could use the tooltip.headerFormat.

API references:
https://api.highcharts.com/highcharts/t ... aderFormat

Live demo:
https://jsfiddle.net/BlackLabel/a1kscqr0/

​If you have further inquiries, you may reach out to me at any time.

Best regards.
Kamil Musiałowski
Highcharts Developer

Return to “Highcharts Usage”