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
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
Source:stackexchange.com