[Chartjs]-Chartjs adding icon to tooltip and label

I’ve found an answer to this,
So basically as @jordanwillis said, it’s only string painted on canvas therefore you can’t add html tags.

So the concept is to create a seperate div where you will put your custom tooltip(text / icons / image) onto, then positioning that div to where the default tooltip shows.

under my chart I added a new div chartjs-tooltip3

<div class="row">
    <div class="col-xs-12">
        <canvas id="chart3" width="500" height="300" style="border:1px solid #f1f1f1; padding:20px; padding-top:40px; box-shadow:2px 2px 2px rgba(0,0,0,0.2);"></canvas>
        <div id="chartjs-tooltip3"></div>
    </div>
</div>

then on my script:

I changed my default tooltip configuration to show false so it wont get in the way of my new tooltip.

$(document).ready(function(){
    Chart.defaults.global.tooltips.enabled = false; //disable default tooltip

And at the lineOptions, instead of calling callbacks

tooltips: {
          callbacks: {
            label: function(tooltipItem, data) {
              return "<i class='fa fa-sampleicon'></i>"+addCommas(tooltipItem.yLabel);
            }
          }
        }

I’ve called custom, here you can freely manipulate your div and other things inside the function..

tooltips: {
            custom: function(tooltip) {
                var tooltipEl = $('#chartjs-tooltip3');

                if (!tooltip) {
                    tooltipEl.css({
                        opacity: 0
                    });
                    return;
                }

                if(tooltip.body){ // if the cursor hits the point

                    value = addCommas(tooltip.body["0"].lines["0"].substring(18)); //the data i need to add on my custom tooltip

                    tooltipEl.html(icon+" "+value); //icon is the html tag <i class="fa fa-sampleicon"></i>

                    //set the custom div to where the default tooltip is supposed to show.
                    tooltipEl.css({
                        opacity: 1,
                        left: tooltip.x + 'px',
                        top: tooltip.y + 'px',
                        fontFamily: this.fontFamily,
                        fontSize: this.fontSize,
                        fontStyle: this.fontStyle,
                    });
                    $("#chart3").css("cursor", "pointer");
                }
                else
                {
                    // if outside of the point, it'll hide the custom div
                    tooltipEl.css({
                        opacity: 0
                    });
                    //change my cursor to default
                    $("#chart3").css("cursor", "default");
                }
            }

        }

to get the data you wanted to get, you can always log the tooltip.. It’ll give you the list of the array objects.

console.log(tooltip);

Here is the basic css of my custom div:

#chartjs-tooltip3{
     opacity: 0;
     position: absolute;
     background: rgba(0, 0, 0, .6);
     color: white;
     padding: 5px 12px 3px 12px;
     border-radius: 3px;
     -webkit-transition: all .1s ease;
     transition: all .2s ease;
     pointer-events: none;
     -webkit-transform: translate(-50%, 0);
     transform: translate(-50%, 0);
 }

I’ve gathered my answer from these threads Chart JS Show HTML in Tooltip and How to add image to chart.js tooltip? and