{"id":4752,"date":"2009-07-15T11:43:41","date_gmt":"2009-07-15T11:43:41","guid":{"rendered":"http:\/\/blog2.fusioncharts.com\/?p=27"},"modified":"2026-01-20T14:41:13","modified_gmt":"2026-01-20T09:11:13","slug":"less-litter-more-letters-using-tooltips","status":"publish","type":"post","link":"https:\/\/www.fusioncharts.com\/blog\/less-litter-more-letters-using-tooltips\/","title":{"rendered":"Less Litter, More Letters: Using Tooltips Effectively"},"content":{"rendered":"While discussing a chart during a presentation, you\u2019d probably have to talk at length about each plotted value. The lengthy discussions become particularly unavoidable if you have to cite reasons for declining sales or for an extended period of stagnation. In situations such as this, tooltips<\/a> come in handy since you can easily display a lot of text on them.\r\n\r\n\r\n\r\nFusionCharts v3.1 allows you to introduce line breaks in tooltip text. So, you can now have a lot of info in the tooltips neatly broken down into multiple lines. This helps in eliminating labels placed right next to the data plots, thereby making the charts litter-free.\r\n\r\nLet’s take the half-yearly analysis of a hotel as an example to drive home the point:\r\n

<\/p>\r\n

Cluttered Column Chart with long data labels<\/p>\r\n\r\n

<\/p>\r\n

Neater Column Chart with details delegated to tooltips<\/p>\r\n\r\n\r\n

How to define custom tooltips with line breaks<\/h2>\r\nFollowing is the XML for the chart above:\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n<\/code>\r\n\r\nThe custom tooltip text is defined with the help of the tooltext<\/em> attribute. Within the tooltip text you can add {br}<\/em> wherever you want to insert a line break. Customizing the tool tip is that simple.\r\n

Fine Tuning the Tooltip<\/h3>\r\nYou can obviously do a great deal of fine tuning with respect to the appearance of tooltips. For instance, you can give it a shadow, glow or blur effect. And, customize the text color, background color and border color too. For more information on all this, visit our online documentation on tooltips here<\/a>.\r\n\r\nThis is the penultimate article in the series – “How to get the most out of v3.1”<\/em>, which began on May 7, 2009. The first article in this series was Exporting Charts as images or PDFs. So, if you are new to this blog we suggest that you go through the previous posts of the series:\r\n