[Chartjs]-Chartjs – Tooltip with Rupee Symbol

2👍

Using Font Awesome Icons in a Tooltip

Just set the tooltipFontFamily

Note that you are not actually putting HTML in the canvas tooltip. You are just setting the font for the entire tooltip to FontAwesome. The side effect is that your numbers will also be in the FontAwesome font – which is usually ok. If this is not OK, custom tooltips would be the way to go (as @J-D and @Lalji Tadhani already noted)

You’ll also have to wait a bit for the font files to load (I believe you’ll have this problem even if you do custom tooltips)


Preview

enter image description here


Script

...
var myNewChart = new Chart(ctx).Line(lineData, {
    tooltipFontFamily: "'FontAwesome'",
    tooltipTemplate: function (tooltip) {
        return "\uf156 " + numConversion(tooltip.value);
    }
});
...

CSS

Notice the place holder for the source

@font-face {
    font-family: 'FontAwesome';
    src: /* path to your font files */
    font-weight: normal;
    font-style: normal;
}

Fiddle – https://jsfiddle.net/akypsz26/

0👍

Add the attribute data-html="true" to your link

HTML-tags in tooltip

Leave a comment