When you create reports that are mainly used on the web, you probably want to enrich your reports with some basic interactivity. Charts need links and tooltips on their data, drill downs need to be defined and hopefully the information overload of ordinary reports gets reduced via fancy images, hidden sections that only show up on demand and other techniques.
The most basic way of creating a annotation on a report is to provide tooltips. Sadly the HTML creators were weird scientists who were used to long and boring lists of footnotes instead of in-lined annotations.
Rich-Text tooltips: The idea
The tool-tip system I am integrating is based on the blog posting written by Michael Leigeber, a web designer and .NET developer who runs the Leigeber Web Development Blog.
If you want to know how the tooltip script works, please refer to Michael Leigeber’s blog posting.
On each element that we define, we can now define the tooltip as HTML text on the “onmouseover” attribute.
tooltip.show('Testing 123 ', 200);
The tooltip gets hidden when the mouse leaves the element via the “onmouseout” attribute.
The first parameter in the “show” method call is used as ‘innerHTML’ on the generated tooltip element. So you instead of just plain text, you can include any HTML content you like, including images, tables or animations.
Dynamic Tooltips: Show me my data in the tooltip
We all agree that static tooltips are rather boring. A tooltip, well-placed can mean all the difference between a information-overloaded report and a report that shows the exactly the right information you need at exactly the right time. Show the main sales numbers, and move the detail content into the tooltip.
In Pentaho Reporting, most attributes and styles can either contain a static value or can be computed at runtime via an expression or formula. When you see a green plus on the last column of either the style or attribute table, then you will be able to add a calculation for that property.
To make the tooltip show your own data, you will need to make the first parameter of the
="tooltip.show('" & [myfield] & "');"
This is already a working tooltip, even though it is a bit primitive. Earlier on I said, you can use HTML text as tooltip. So lets do a bit of HTML magic here. Again, text in HTML needs to be encoded properly as well.
="tooltip.show('" & QUOTETEXT("
" & QUOTETEXT([PRODUCTNAME];"html") & "
This produces a tooltip that prints the product code from the steel-wheels example and the product description divided by a horizontal line.
You can grab a sample report for Pentaho Reporting 3.8.0-GA: