CODEWITHSUNDEEP
highcharts
dogmatic69
dogmatic69

Reputation: 7575

highcharts / stock charts custom toolbar button text / title

I would like to know how you can customise the tool tips for the custom buttons.

All the examples for custom buttons are like this with _titleKey: 'printButtonTitle'

Setting this to anything else results in undefined as the tool tip. I have spent a while looking through the source for where this is created but cant find it.

Also though of using something like an id and replacing it with jquery $('#foo-button title').html('yey'); but the custom buttons do not have ids assigned.

Upvotes: 0

Views: 5175

Answers (2)

Jugal Thakkar
Jugal Thakkar

Reputation: 13472

Although an answer is accepted, I would like to present an alternate solution. Highcharts does give a way (unfortunately, not well documented though) to set custom titles for custom buttons. Highchart reads the strings from its global language object Highchart.lang. To have a custom title, you will need to add the button title as a new property (you can call the new property by name, except the reserved ones) in this object using the Highcharts.setOptions() global method as follows

Highcharts.setOptions({
    lang: {
        myButtonTitle: "Don't Click"
    }
});

One thing to keep in mind is this is a global property and hence is required to be set before making an constructor calls and you have to call it on the Highcharts namespace and not as a part of individual charting options.

You can now use the above set title in your buttons by specifying a _titleKey property for the button with the value corresponding to the key that was used above to set the name

exporting: {
    buttons: {
        'myButton': {
            _id: 'myButton',
            symbol: 'diamond',
            x: -62,
            symbolFill: '#B5C9DF',
            hoverSymbolFill: '#779ABF',
            onclick: function() {
                alert('click!')
            },
            _titleKey: "myButtonTitle"

        }
    }
}

Custom Button Title | Highcharts & Highstock @ jsFiddle

Upvotes: 6

Ricardo Lohmann
Ricardo Lohmann

Reputation: 26320

You can set an id to the button using _id and then update it using jQuery.

exporting: {
    buttons: {
        'myButton': {
            _id: 'myButton',
            symbol: 'diamond',
            x: -62,
            symbolFill: '#B5C9DF',
            hoverSymbolFill: '#779ABF',
            onclick: function() {
                alert('click!')
            }
        }
    }
}

var buttonTitle = 'updated title';
jQuery("#myButton").attr('title', buttonTitle).children().text(buttonTitle);

demo

Upvotes: 3

Related Questions