Chart JS custom tooltip option?

Question

I am trying to build chart using Chart.Js. This chart.js has default option for tooltip, I want to make customized tooltip option. Is there a way to make it possible?

<

Answer 1

I have used this, i've found it on stackoverflow, but i try hardly to find it again

var chartoptions =
{
    customTooltips: function ( tooltip )
    {
        var tooltipEl = $( "#chartjs-tooltip" );
        if ( !tooltip )
        {
            tooltipEl.css( {
                opacity: 0
            } );
            return;
        }

        tooltipEl.removeClass( 'above below' );
        tooltipEl.addClass( tooltip.yAlign );

        // split out the label and value and make your own tooltip here
        var parts = tooltip.text.split( ":" );
        var innerHtml = '' + parts[0].trim() + ' : ' + parts[1].trim() + '';
        tooltipEl.html( innerHtml );

        tooltipEl.css( {
            opacity: 1,
            left: tooltip.chart.canvas.offsetLeft + tooltip.x + 'px',
            top: tooltip.chart.canvas.offsetTop + tooltip.y + 'px',
            fontFamily: tooltip.fontFamily,
            fontSize: tooltip.fontSize,
            fontStyle: tooltip.fontStyle
        } );
    }
}

Link to where i got it: Chart.js: changing tooltip template