1

I am using tooltip for my chart like this :-

var opt = {
                  ....
                  animation: true,
                  animationSteps: 100,                   
                  tooltipTemplate: function (tooltip) {
                       return numConversion(tooltip.value);
                  }
           }

function numConversion(val) {
    if (val >= 10000000) val = (val / 10000000).toFixed(2) + ' Cr';
    else if (val >= 100000) val = (val / 100000).toFixed(2) + ' Lac';
    else if (val >= 1000) val = (val / 1000).toFixed(2) + ' K';
    return val;

}

I want a Rupee symbol to prepend the text. When i use some html tag to the tooltip, the tag is displayed as it is.

return "<i class='fa fa-inr'></i>" + numConversion(tooltip.value);

The above line displays the tag as it is in text format. How to display the actual tags in the tooltip?

Anup
  • 9,396
  • 16
  • 74
  • 138
  • 1
    You need to create custom tooltip.The chart.js will not recognize html in tooltip unless you create a seperate html template for that and assign same to the custom tooltip. Have a look at this http://stackoverflow.com/questions/30500601/chart-js-changing-tooltip-template and this http://jsfiddle.net/6rxdo0c0/1/. – J-D Dec 09 '15 at 06:17
  • I already tried `customTooltips`. The value in the `tooltip` comes `false`. – Anup Dec 09 '15 at 06:21
  • Can you please share your code in JsFiddle with custom tooltip. – J-D Dec 09 '15 at 06:23
  • The custom tooltip thing is working for me. I forgotten to include the `
    `for tooltip.
     – Anup Dec 09 '15 at 09:10

2 Answers2

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/

potatopeelings
  • 40,709
  • 7
  • 95
  • 119
  • Is there any way other than fontawesome...like using `₹(₹)`. Because unnecessarily the application has to depend onthe website of font awesome or rather download it. – Anup Dec 09 '15 at 10:34
  • Oh yeah, just do `return "\u20B9 " + numConversion(tooltip.value);` if you don't want to use fontawesome symbol. Btw, you might want to check that your target machines doesn't turn it into boxes (I don't know enough to figure out what makes it boxes :-)) – potatopeelings Dec 09 '15 at 10:39
0

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

HTML-tags in tooltip

Community
  • 1
  • 1
Lalji Tadhani
  • 14,041
  • 3
  • 23
  • 40
  • The tooltip appears on hover of the Line Chart points. There is no link here. I am using chartjs. – Anup Dec 09 '15 at 08:49