## XML Attributes for Tool Tip
A tool-tip is shown when the mouse is hovered over a particular data point. It shows the following information: Single series chart (except pie & doughnut): Name & value Pie & Doughnut: Name & value/percentage Multi-series & combination chart: Series Name, Category Name, Data Value
You can opt not to show the tool tip using showToolTip='0' attribute.
<chart showToolTip='0'...>
Custom Tool Text
You can set a cutom tool tip for any of the data points using tooltext attribute of the <set> element which is used to define the individual data elements.
<chart caption='Monthly Revenue' xAxisName='Month' yAxisName='Revenue' numberPrefix='$' showValues='0'> <set label='Jan' value='220000' toolText='Highest'/> <set label='Feb' value='90000' /> ... </chart>
The above would yield the following result:
Customizing the tool tip
You can customize the background & border color of the tool tip using the toolTipBorderColor and toolTipBgColor attributes respetively. The colors should be without the '#' symbol.
<chart ... toolTipBorderColor='D9E5F1' toolTipBgColor='D9E5F1'>
This would yield the following result:
Using Styles to specify font properties for tool tip
Using STYLES, you can set individual font properties for different text on the chart. Here, we will customize the font properties of the tool tip using STYLES to have the following end result:
The XML for this chart is as under. To read more on Styles, please see "For Web Developers > FusionCharts and STYLES" section.
<chart caption='Quarterly Sales Summary' subcaption='Figures in $' xAxisName='Quarter' yAxisName='Sales' showValues='0' > <set label='Qtr 1' value='420500' /> <set label='Qtr 2' value='295400' /> <set label='Qtr 3' value='523400' /> <set label='Qtr 4' value='465400' /> <styles> <definition> <style name='myToolTipFont' type='font' font='Arial' size='12' color='FF5904'/> </definition> <application> <apply toObject='ToolTip' styles='myToolTipFont' /> </application> </styles> </chart>
Tool Tip in multiple lines
FusionCharts v3 allows you to put your tool tips in multiple lines with a little manual tweaking. Consider the XML below:
<chart> <set label='John' value='420' tooltext='John Miller&lt;BR&gt;Score: 420&lt;BR&gt;Rank:2'/> <set label='Mary' value='295' tooltext='Mary Evans&lt;BR&gt;Score: 295&lt;BR&gt;Rank:3'/> <set label='Tom' value='523' tooltext='Tom Bowler&lt;BR&gt;Score: 523&lt;BR&gt;Rank:1'/> <styles> <definition> <style name='myHTMLFont' type='font' isHTML='1' /> </definition> <application> <apply toObject='TOOLTIP' styles='myHTMLFont' /> </application> </styles> </chart>
In the above XML, we're first setting 3 lines tool tip content for each <set>. To separate each line we use the <BR> HTML tag. However, since XML cannot use < and >, so we convert <BR> to &lt;BR&gt; . Thereafter, we need to tell FusionCharts that we'll be displaying HTML content in tool-tip. So, we create a new font style type with isHTML property set to 1 and then apply it to TOOLTIP object. When you now see the chart, you'll get the following output: