更改工具提示标题或添加更多标签

I'm using chart.js v2 for create a chart, and get the data from database.

I want to change the tooltips title from id_office[] into name_office[] or if it's not possible, add new label : name_office[] into tooltips information.

for now the tooltips only show id_office[] and bpu[] data.

here is my code

   function chart_dashboard(data) {
    var bpu = [];                       
    var id_office = [];
    var name_office = [];

    for (i = 0; i < data.list_chart_dashboard.length; i++) {
        var obj = data.list_chart_dashboard[i];
        bpu.push(obj.penambahan_TK_BPU);
        id_office.push(obj.id_office);
        name_office.push(obj.name_office);
    }


    var chartdata = {
        labels: id_office,
        datasets : [{
            label: 'BPU',
            backgroundColor: [
                'rgba(114, 12, 34, 0.2)'
            ],
            borderColor: 'rgba(32,99,12,1)',
            hoverBackgroundColor: 'rgba(34, 45, 50, 0.2)',
            hoverBorderColor: 'rgba(89, 162, 134)',
            borderWidth:1,
            data: bpu
        }]
    };

    var ctx = $("#chart_dashboard")[0].getContext('2d');
    var barGraph = new Chart(ctx, {

        type: 'bar',
        data: chartdata,
            // Configuration options go here
        options: {
            responsive: true,

            "hover": {
                "animationDuration": 0
            },
            "animation": {
                "duration": 1,
                "onComplete": function() {
                    var chartInstance = this.chart,
                    ctx = chartInstance.ctx;

                    ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'bottom';

                    this.data.datasets.forEach(function(dataset, i) {
                        var meta = chartInstance.controller.getDatasetMeta(i);
                        meta.data.forEach(function(bar, index) {
                            var data = dataset.data[index];
                            ctx.fillText(data, bar._model.x, bar._model.y - 5);
                        });
                    });
                }
            },
            tooltips: {
                "enabled": true
            },
            scales: {      
                xAxes: [{
                }],

                yAxes: [{
                    ticks: {
                        beginAtZero: true,
                        fontSize: 10,
                        //max: 300
                        //stepSize: 10
                    },  

                    scaleLabel: {
                        display: true,
                        labelString: "employee BPU"
                    }
                }]
            }
        }
    });  
}

So the tooltips become

id_office, name_office, bpu

Thank you for your help and sorry for my bad english.