Articles in this section
Category / Section

What's the difference between tooltip format and template in JSChart?

2 mins read

When you move the mouse over a particular point, the tooltip displays the values of that point. By default, its display format looks like x value :  y value. For example:  2000 : 20.

 

Tooltip format:

You can customize the values displayed in the tooltip by using the format property. The online sample for using the ToolTip format is available in the following link: https://js.syncfusion.com/demos/jquery/#!/azure/chart/chartcustomization/symbols

 

Tooltip template:

The ToolTip template refers to the use of HTML elements like image and tables in the tooltip through the template property of the tooltip. Since HTML elements such as div, image, table, etc., are used, you can style the ToolTip template by using the CSS and it appears more attractive than the default tooltip. The online sample for tooltip template is available in the following link: https://js.syncfusion.com/demos/web/#!/azure/chart/chartcustomization/tooltiptemplate

 

Difference between tooltip format and template:

In general, ToolTip format is used to format the values displayed in the tooltip; whereas, ToolTip template is used to customize the appearance of the tooltip.

In the following code example, the first series is rendered with the ToolTip template, the next with specified ToolTip format, and the last series is rendered with the default tooltip.

 

JS

<div id="container"></div>
<div id="Tooltip" style="display: none">Year : #point.x# <br> Percent : #point.y# %</div>
<script type="text/javascript">
     $(function () {
        $("#container").ejChart(
                  {
                    . . .
                    series: [{
                          points: [{ x: 2005, y: 28 }, { x: 2006, y: 25 },
                          { x: 2007, y: 26 }, { x: 2008, y: 27 }, { x: 2009, y: 32 },                        
                          { x: 2010, y: 35 }, { x: 2011, y: 30 }],
                          name: 'India', tooltip: { visible: true, template: 'Tooltip'}
                      },
                          {
                              points: [{ x: 2005, y: 31 }, { x: 2006, y: 28 },
                          { x: 2007, y: 30 }, { x: 2008, y: 36 }, { x: 2009, y: 36 }, 
                          { x: 2010, y: 39 }, { x: 2011, y: 37 }],
                           name: 'Germany', tooltip: { visible: true, format: '#point.y# : <br/> #point.x#'}
                          }] 
                     . . .               
             });
       }); 
</script>

 

The output of the above code example is as follows.

 

 

The difference between tooltip format and tooltip template

Figure 1: Chart with Tooltip template

 

JS Playground Link: Tooltip template


Conclusion

I hope you enjoyed the difference between tooltip format and tooltip template.

You can refer to our JavaScript Chart
feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript Chart
example
 to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls. If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forumsDirect-Trac, or feedback portal. We are always happy to assist you!


Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied