Tooltip on custom button in Highcharts

Question

Came a cross this fiddle in the Highcharts API doc: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/exporting/buttons-text/

printButton: {
                text: 'Print',
                onclick: function () {
                    this.print();
                }
            }

As you can see from hovering over "print" or "download", the tooltip is undefined.

So, my question, simply, where do I define it?

Best regards :)

Answer 1

If you want to add custom tooltip text for a button, you must add a 'lang' object in the chart's options, and define a key with some text.

Then use that key in the custom button's definition.

var chart = new Highcharts.Chart({
    chart: {
        // your chart options
    },
    lang: {
       yourKey: "Custom button tooltip text"
    },
    exporting: {
        buttons: {
            yourCustomButton: {
                text: "Click me",
                _titleKey: "yourKey",
                onclick: function() {
                    // button functionality goes here
                }
            }
        }
    }
});

See http://jsfiddle.net/7wEEj/

Answer 2

Add directly _titleKey, see: http://jsfiddle.net/x36qR/1/

Answer 3

I'd like to add that the lang option works even if the button is not custom. For instance,

lang: {
    myKey: "Hello"
},
exporting: {
    buttons: {
        exportButton: {
            _titleKey:"myKey",
            enabled: true
        },
        printButton: {
            enabled: true
                }
           }
    }, ...

gives you the possibility to translate the tooltips of the export and print button.