A report shows all time sales quantity by product names. As this report is used online ( HTML format in Internet Explorer), business thinks it will be handy to show Product description as tooltip on the product names. When the user hovers their mouse pointer over Product name, a tooltip should appear, describing the product.
Create a simple list report with Product name, Product description, and Sales Quantity as columns.
- We don't want to show the Product description as column, but want to use the data item in further steps. So, select Product description column and cut it using Ctrl+X. Confirm that the Product description data item is still present in Query1 by checking in Query Explorer.
-
On the report page, unlock the report objects by hitting unlock button.
- Insert an HTML Item in Product name column, just before the text item. Insert another HTML Item after the text item. This will look like the following screenshot:
- Define the first HTML item as a Report Expression and define it as:
'<span title="' + [Query1].[Product description] + '">'
- Define the second HTML item as a Text:
</span>
- Run the report to test it.
Here we are using our familiar and very useful HTML tag called <span>. We used it earlier for applying JavaScript for prompt manipulation. In this recipe, we are wrapping the product name within a span and defining its Title to be Product description.
When report is run in web browser, the title is shown as Tooltip.
Once you define the span, you can do much more to the item. For example, overriding the mouse events. Please refer to HTML guides for this.
Read about using SPAN to manipulate the prompt control in previous chapter (Chapter 3, Tips and Tricks: JavaScript—Prompt page).